支持array

This commit is contained in:
xyf-mac 2021-11-06 21:14:38 +08:00
parent fb5f3f8817
commit d5bce1c75d

View File

@ -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;