Add class "vjs-key", "vjs-value" to node. #20

Author: leezng

src/components/app.vue

@@ -5,6 +5,7 @@
       'has-selectable-control': isMultiple || showSelectController,
       'is-root': currentDeep === 1,
       'is-selectable': selectable,
+      'is-selected': isSelected,
       'is-mouseover': isMouseover
     }"
     @click.stop="handleClick($event, 'tree')"
@@ -22,7 +23,7 @@
         :data="data"
         :show-length="showLength"
         :show-comma="notLastKey">
-        <span v-if="currentDeep > 1 && !Array.isArray(parentData)">{{ keyFormatter(currentKey) }}:</span>
+        <span v-if="currentDeep > 1 && !Array.isArray(parentData)" class="vjs-key">{{ keyFormatter(currentKey) }}:</span>
       </brackets-left>
 
       <!-- 数据内容, data 为对象时, key 表示键名, 为数组时表示索引 -->
@@ -66,7 +67,7 @@
       :parent-data="parentData"
       :data="data"
       :current-key="currentKey">
-      <span v-if="!Array.isArray(parentData)">{{ keyFormatter(currentKey) }}:</span>
+      <span v-if="!Array.isArray(parentData)" class="vjs-key">{{ keyFormatter(currentKey) }}:</span>
     </simple-text>
   </div>
 </template>
@@ -205,6 +206,16 @@
         return this.selectableType === 'single'
       },
 
+      isSelected () {
+        if (this.isMultiple) {
+          return this.model.includes(this.path)
+        } else if (this.isSingle) {
+          return this.model === this.path
+        } else {
+          return false
+        }
+      },
+
       propsError () {
         const error = this.selectableType && !this.selectOnClickNode && !this.showSelectController
         return error ? 'When selectableType is not null, selectOnClickNode and showSelectController cannot be false at the same time, because this will cause the selection to fail.' : ''

src/components/simple-text.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <slot></slot>
-    <span :class="`vjs-value__${dataType}`">
+    <span :class="`vjs-value vjs-value__${dataType}`">
       {{ textFormatter(data) }}
     </span>
   </div>