mirror of
https://github.com/tidys/cc-inspector-chrome
synced 2025-04-19 16:38:41 +00:00
支持array
This commit is contained in:
parent
fb5f3f8817
commit
d5bce1c75d
@ -71,9 +71,6 @@
|
|||||||
</el-color-picker>
|
</el-color-picker>
|
||||||
<div class="hex" :style="{color:colorReverse(value.data)}">{{ value.data }}</div>
|
<div class="hex" :style="{color:colorReverse(value.data)}">{{ value.data }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isArray()" style="display: flex;flex-direction: column;">
|
|
||||||
{{ value.data.length }}
|
|
||||||
</div>
|
|
||||||
<!-- <div v-if="isArrayOrObject()" class="array-object">-->
|
<!-- <div v-if="isArrayOrObject()" class="array-object">-->
|
||||||
<!-- <div class="text">-->
|
<!-- <div class="text">-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
@ -99,10 +96,13 @@
|
|||||||
<div class="name">{{ value.engineName }}</div>
|
<div class="name">{{ value.engineName }}</div>
|
||||||
<el-button @click="onPlaceInTree" type="primary" icon="el-icon-place"></el-button>
|
<el-button @click="onPlaceInTree" type="primary" icon="el-icon-place"></el-button>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isArrayOrObject()&&fold" class="arrayOrObjectDesc">
|
<div v-if="isObject()&&fold" class="objectDesc">
|
||||||
{{ value.data }}
|
{{ value.data }}
|
||||||
</div>
|
</div>
|
||||||
<div class="slot">
|
<div v-if="isArray()" class="array">
|
||||||
|
Array({{ value.data.length }})
|
||||||
|
</div>
|
||||||
|
<div class="slot" v-if="false">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -124,7 +124,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
||||||
import Vue from "vue"
|
import Vue from "vue"
|
||||||
import {Component, Prop} from "vue-property-decorator"
|
import {Component, Prop, Watch} from "vue-property-decorator"
|
||||||
import {DataType, Info, EngineData, Property} from "../data"
|
import {DataType, Info, EngineData, Property} from "../data"
|
||||||
import {connectBackground} from "@/devtools/connectBackground";
|
import {connectBackground} from "@/devtools/connectBackground";
|
||||||
import {Msg} from "@/core/types";
|
import {Msg} from "@/core/types";
|
||||||
@ -146,6 +146,15 @@ export default class UiProp extends Vue {
|
|||||||
@Prop()
|
@Prop()
|
||||||
value!: Info;
|
value!: Info;
|
||||||
|
|
||||||
|
@Watch("value")
|
||||||
|
watchValue() {
|
||||||
|
if (this.isArray()) {
|
||||||
|
this.subData = this.value.data;
|
||||||
|
} else {
|
||||||
|
this.subData = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
isString() {
|
isString() {
|
||||||
return this.value && (this.value.type === DataType.String);
|
return this.value && (this.value.type === DataType.String);
|
||||||
}
|
}
|
||||||
@ -203,6 +212,11 @@ export default class UiProp extends Vue {
|
|||||||
}
|
}
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.watchValue();
|
||||||
}
|
}
|
||||||
|
|
||||||
isShowTooltip() {
|
isShowTooltip() {
|
||||||
@ -389,13 +403,19 @@ export default class UiProp extends Vue {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrayOrObjectDesc {
|
.objectDesc {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.array {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
.engine {
|
.engine {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user