CocosPlugin/cc-inspector-chrome
1
0
Fork 0
mirror of https://github.com/tidys/cc-inspector-chrome synced 2025-04-18 07:58:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

增加过滤功能

Browse Source
This commit is contained in:
xyf-mac 2021-11-12 22:21:49 +08:00
parent 96e8a883a4
commit 6a3f3d7592
9 changed files with 94 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
source/src/devtools/global.less
View File

@ -22,6 +22,10 @@
}
}
.el-input-group__append {
padding: 0;
}
.el-tree {
width: 100%;
}

29
source/src/devtools/icon-font/demo_index.html
View File

@ -54,6 +54,12 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe7b9;</span>
<div class="name">font-size</div>
<div class="code-name">&amp;#xe7b9;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe626;</span>
<div class="name">车巴巴-未知项</div>
@ -90,9 +96,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1624098111157') format('woff2'),
url('iconfont.woff?t=1624098111157') format('woff'),
url('iconfont.ttf?t=1624098111157') format('truetype');
src: url('iconfont.woff2?t=1636725471182') format('woff2'),
url('iconfont.woff?t=1636725471182') format('woff'),
url('iconfont.ttf?t=1636725471182') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -118,6 +124,15 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont el-icon-third-font-size"></span>
<div class="name">
font-size
</div>
<div class="code-name">.el-icon-third-font-size
</div>
</li>
<li class="dib">
<span class="icon iconfont el-icon-third-unknown"></span>
<div class="name">
@ -172,6 +187,14 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-icon-third-font-size"></use>
</svg>
<div class="name">font-size</div>
<div class="code-name">#el-icon-third-font-size</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-icon-third-unknown"></use>

10
source/src/devtools/icon-font/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 2620843 */
src: url('iconfont.woff2?t=1624098111157') format('woff2'),
url('iconfont.woff?t=1624098111157') format('woff'),
url('iconfont.ttf?t=1624098111157') format('truetype');
src: url('iconfont.woff2?t=1636725471182') format('woff2'),
url('iconfont.woff?t=1636725471182') format('woff'),
url('iconfont.ttf?t=1636725471182') format('truetype');
}
.iconfont ,[class='el-icon-third'],[class*=' el-icon-third']{
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.el-icon-third-font-size:before {
content: "\e7b9";
}
.el-icon-third-unknown:before {
content: "\e626";
}

2
source/src/devtools/icon-font/iconfont.js
View File

File diff suppressed because one or more lines are too long

7
source/src/devtools/icon-font/iconfont.json
View File

@ -5,6 +5,13 @@
"css_prefix_text": "el-icon-third-",
"description": "",
"glyphs": [
{
"icon_id": "8794801",
"name": "font-size",
"font_class": "font-size",
"unicode": "e7b9",
"unicode_decimal": 59321
},
{
"icon_id": "1156016",
"name": "车巴巴-未知项",

BIN
source/src/devtools/icon-font/iconfont.ttf
View File

Binary file not shown.

BIN
source/src/devtools/icon-font/iconfont.woff
View File

Binary file not shown.

BIN
source/src/devtools/icon-font/iconfont.woff2
View File

Binary file not shown.

50
source/src/devtools/ui/index.vue
View File

@ -17,6 +17,16 @@
<el-button type="success" class="el-icon-refresh" @click="onBtnClickUpdateTree"></el-button>
</div>
<div class="treeList">
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
<template slot="append">
<div class="matchCase ">
<div class="iconfont el-icon-third-font-size" @click.stop="onChangeCase"
title="匹配大小写"
:style="{'color':matchCase?'red':''}">
</div>
</div>
</template>
</el-input>
<el-tree :data="treeData"
ref="tree"
style="display: inline-block;"
@ -24,6 +34,7 @@
:highlight-current="true"
:default-expand-all="false"
:default-expanded-keys="expandedKeys"
:filter-node-method="filterNode"
:expand-on-click-node="false"
node-key="uuid"
@node-expand="onNodeExpand"
@ -51,7 +62,7 @@
<script lang="ts">
import Vue from "vue";
import {Component} from "vue-property-decorator";
import {Component, Watch} from "vue-property-decorator";
import properties from "./propertys.vue";
import {Msg, Page, PluginEvent} from "@/core/types"
import {connectBackground} from "@/devtools/connectBackground";
@ -70,6 +81,20 @@ export default class Index extends Vue {
expandedKeys: Array<string> = [];
selectedUUID: string | null = null;
filterText: string | null = null;
@Watch("filterText")
updateFilterText(val: any) {
(this.$refs?.tree as any)?.filter(val);
}
private matchCase = false;
onChangeCase() {
this.matchCase = !this.matchCase;
this.updateFilterText(this.filterText);
}
// el-tree的渲染key
defaultProps = {
children: "children",
@ -107,6 +132,19 @@ export default class Index extends Vue {
});
}
filterNode(value: any, data: any) {
if (!value) {
return true;
} else {
if (this.matchCase) {
// 严格匹配大写
return data?.name?.indexOf(value) !== -1;
} else {
return data?.name?.toLowerCase().indexOf(value.toLowerCase()) !== -1;
}
}
}
_expand(uuid: string) {
let expandKeys: Array<string> = [];
@ -403,6 +441,16 @@ export default class Index extends Vue {
text-decoration: line-through;
}
.matchCase {
width: 30px;
height: 26px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
&::-webkit-scrollbar {
width: 6px;
height: 6px;