From d0b832b11751412e1d9281f40b9a973b97bb4c15 Mon Sep 17 00:00:00 2001
From: xuyanfeng <xu_yanfeng@126.com>
Date: Tue, 6 Apr 2021 18:41:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=98=BE=E7=A4=BAarray=20object?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/src/devtools/ccType/ui-prop.vue | 39 ++++++++++++++++++++++++++
 source/src/devtools/data.ts            | 13 +++++++++
 2 files changed, 52 insertions(+)

diff --git a/source/src/devtools/ccType/ui-prop.vue b/source/src/devtools/ccType/ui-prop.vue
index 68ff90e..2451681 100644
--- a/source/src/devtools/ccType/ui-prop.vue
+++ b/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%;
diff --git a/source/src/devtools/data.ts b/source/src/devtools/data.ts
index fa512d8..23e9401 100644
--- a/source/src/devtools/data.ts
+++ b/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}
+        }
       }
     ]
   },