#8 增加长度标识，对应属性为 showLength

Author: leezng

src/components/app.vue

@@ -18,6 +18,7 @@
       <brackets-left
         :visiable.sync="visiable"
         :data="data"
+        :show-length="showLength"
         :not-last-key="notLastKey">
         <span v-if="currentDeep > 1 && !Array.isArray(parentData)">{{ currentKey }}:</span>
       </brackets-left>
@@ -32,6 +33,7 @@
           :parent-data="data"
           :data="item"
           :deep="deep"
+          :show-length="showLength"
           :path="path + (Array.isArray(data) ? `[${key}]` : `.${key}`)"
           :path-checked="pathChecked"
           :path-selectable="pathSelectable"
@@ -84,6 +86,11 @@
         type: Number,
         default: Infinity
       },
+      // 是否显示数组|对象的长度
+      showLength: {
+        type: Boolean,
+        default: false
+      },
       // 数据层级顶级路径
       path: {
         type: String,
@@ -171,7 +178,7 @@
       handleMouseout () {
         this.existMouseover && this.selectable && (this.treeContentBackground = 'transparent')
       },
-      // 工具函数: 判断是否对象
+      // 是否对象
       isObject (value) {
         return this.getDataType(value) === 'object'
       },

src/components/brackets-left.vue

@@ -4,14 +4,14 @@
     <span
       v-show="dataVisiable"
       class="vjs__tree__node"
-      @click.stop="dataVisiable = !dataVisiable">
+      @click.stop="toggleBrackets">
       {{ Array.isArray(data) ? '[' : '{' }}
     </span>
     <span
       v-show="!dataVisiable"
       class="vjs__tree__node"
-      @click.stop="dataVisiable = !dataVisiable">
-      {{ bracketsFormatter(Array.isArray(data) ? '[...]' : '{...}') }}
+      @click.stop="toggleBrackets">
+      {{ doubleBracketsGenerator(data) }}
     </span>
   </div>
 </template>
@@ -20,6 +20,24 @@
   import bracketsMixin from 'src/mixins/brackets-mixin'
 
   export default {
-    mixins: [bracketsMixin]
+    mixins: [bracketsMixin]，
+    props: {
+      showLength: Boolean
+    },
+    methods: {
+      // 双括号内容生成器
+      doubleBracketsGenerator (data) {
+        const isArray = Array.isArray(data)
+        const brackets = isArray ? '[...]' : '{...}'
+        if (this.showLength) {
+          // 若展示长度, 形如 [...] // 3 items
+          const text = isArray
+            ? `${data.length} items`
+            : `${Object.keys(data).length} keys`
+          brackets += ` // ${text}`
+        }
+        return bracketsFormatter(brackets)
+      }
+    }
   }
 </script>

src/components/brackets-right.vue

@@ -2,7 +2,7 @@
   <div v-show="dataVisiable">
     <span
       class="vjs__tree__node"
-      @click.stop="dataVisiable = !dataVisiable">
+      @click.stop="toggleBrackets">
       {{ bracketsFormatter(Array.isArray(data) ? ']' : '}') }}
     </span>
   </div>

src/mixins/brackets-mixin.js

@@ -20,6 +20,11 @@ export default {
     }
   },
   methods: {
+    // 切换括号展开|关闭
+    toggleBrackets () {
+      this.dataVisiable = !this.dataVisiable
+    },
+    // 括号优化函数, 若不是最后一项, 自动添加逗号
     bracketsFormatter (brackets) {
       return this.notLastKey ? `${brackets},` : brackets
     }