移除child标识，改为currenDeep，并增加deep属性

Author: leezng

example/App.vue

@@ -21,7 +21,7 @@
         <h3>JSON Input:</h3>
         <textarea v-model="val"></textarea>
 
-        <h3>Click Result:</h3>
+        <h3>Latest Click Result:</h3>
         <div>path: {{itemPath}}</div>
         <div>data: <pre>{{itemData}}</pre></div>
       </div>
@@ -103,6 +103,7 @@ export default {
 <style lang="less">
   html, body {
     margin: 0;
+    background-color: #f9f9f9;
   }
   .example {
     position: relative;
@@ -130,6 +131,11 @@ export default {
       border-radius: 5px;
       resize: vertical;
       font-family: inherit;
+      &:focus {
+        outline: none;
+        border-color: #1d8ce0;
+        box-shadow: 0 0 3px #1d8ce0;
+      }
     }
     pre{
       margin: 0;

src/components/app.vue

@@ -3,13 +3,12 @@
     class="vjs__tree"
     :style="{
       'background-color': treeContentBackground,
-      'position': child ? '' : 'relative',
-      'margin-left': !child && existCheckbox ? '30px' : ''
+      'position': currentDeep > 1 ? '' : 'relative',
+      'margin-left': currentDeep === 1 && existCheckbox ? '30px' : ''
     }"
     @click.stop="handleClick($event)"
     @mouseover.stop="handleMouseover"
     @mouseout.stop="handleMouseout">
-
     <template v-if="selectable && existCheckbox" class="vjs-checkbox">
       <checkbox v-model="checkboxVal" @change="handleClick($event, true)"></checkbox>
     </template>
@@ -21,7 +20,7 @@
         :data="data"
         :index="index"
         :last-index="lastIndex">
-        <span v-if="child && !Array.isArray(parentData)">{{ index }}:</span>
+        <span v-if="currentDeep > 1 && !Array.isArray(parentData)">{{ index }}:</span>
       </brackets-left>
 
       <!-- 数据内容, data 为对象时, index 表示 key, 为数组才表示索引 -->
@@ -33,12 +32,13 @@
         <vue-json-pretty
           :parent-data="data"
           :data="item"
+          :deep="deep"
           :path="path + (Array.isArray(data) ? `[${index}]` : `.${index}`)"
           :path-checked="pathChecked"
           :path-selectable="pathSelectable"
           :selectable-type="selectableType"
           :index="index"
-          :child="true"
+          :current-deep="currentDeep + 1"
           @click="handleItemClick">
         </vue-json-pretty>
       </div>
@@ -76,7 +76,13 @@
     },
     props: {
       /* 外部可用 START */
-      data: {}, // 当前树的数据
+      // 当前树的数据
+      data: {},
+      // 定义树的深度, 大于该深度的子树将不被展开
+      deep: {
+        type: Number,
+        default: Infinity
+      },
       // 数据层级顶级路径
       path: {
         type: String,
@@ -98,13 +104,19 @@
         default: () => true
       },
       /* 外部可用 END */
-      parentData: {}, // 当前树的父级数据
-      child: Boolean, // 是否子树(优化: 通过 $parent?)
+
+      // 当前树的父级数据
+      parentData: {},
+      // 当前树的深度, 以根节点作为0开始, 所以第一层树的深度为1, 递归逐次递增
+      currentDeep: {
+        type: Number,
+        default: 1
+      },
       index: {}
     },
     data () {
       return {
-        visiable: true,
+        visiable: this.currentDeep <= this.deep,
         treeContentBackground: 'transparent',
         checkboxVal: this.pathChecked.includes(this.path) // 复选框的值
       }