显示array object

source/src/devtools/ccType/ui-prop.vue

@@ -39,6 +39,12 @@
         <el-color-picker style="position: absolute;" v-model="value.data"></el-color-picker>
         <div class="hex" :style="{color:colorReverse(value.data)}">{{ value.data }}</div>
       </div>
+      <div v-if="isArrayOrObject()" class="array-object">
+        <div class="text">
+          {{ valueString() }}
+        </div>
+        <el-button @click="onShowValueInConsole"> 点击在控制台打印显示</el-button>
+      </div>
       <div class="slot">
         <slot></slot>
       </div>
@@ -96,9 +102,25 @@ export default class UiProp extends Vue {
     return this.value && (this.value.type === DataType.Color);
   }
 
+  isArrayOrObject() {
+    return this.value && (this.value.type === DataType.Array || this.value.type === DataType.Object)
+  }
+
   created() {
   }
 
+  valueString() {
+    try {
+      return JSON.stringify(this.value.data)
+    } catch (e) {
+      return ''
+    }
+  }
+
+  onShowValueInConsole() {
+    console.log(this.value.data)
+  }
+
   @Prop({default: 1})
   step: number | undefined;
 
@@ -174,6 +196,7 @@ export default class UiProp extends Vue {
     flex: 3;
     text-align: left;
     height: 100%;
+    overflow: hidden;
 
     .color {
       position: relative;
@@ -205,6 +228,22 @@ export default class UiProp extends Vue {
       }
     }
 
+    .array-object {
+      flex:1;
+      max-width: 100%;
+      overflow: hidden;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .text {
+        flex:1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
     .slot {
       display: flex;
       width: 100%;

source/src/devtools/data.ts

@@ -211,6 +211,19 @@ export const testData = [
           type: DataType.Color,
           data: '#ff0000'
         }
+      },
+      {
+        name: 'array',
+        value: {
+          type: DataType.Array,
+          data: [1, 2, 3, 4]
+        }
+      }, {
+        name: 'object',
+        value: {
+          type: DataType.Object,
+          data: {a: '11111111111111111111111111111111111111111111111111111111111', b: 2, c: 3}
+        }
       }
     ]
   },