Add prop "highlightSelectedNode" to highlight selected item. closed #19

Author: leezng

example/App.vue

@@ -54,8 +54,12 @@
             <input type="checkbox" v-model="showDoubleQuotes">
           </div>
           <div>
-            <label>showMouseOver</label>
-            <input type="checkbox" v-model="showMouseOver">
+            <label>highlightMouseoverNode</label>
+            <input type="checkbox" v-model="highlightMouseoverNode">
+          </div>
+          <div>
+            <label>highlightSelectedNode</label>
+            <input type="checkbox" v-model="highlightSelectedNode">
           </div>
           <div>
             <label>deep</label>
@@ -80,7 +84,8 @@
           :path="path"
           :deep="deep"
           :show-double-quotes="showDoubleQuotes"
-          :show-mouse-over="showMouseOver"
+          :highlight-mouseover-node="highlightMouseoverNode"
+          :highlight-selected-node="highlightSelectedNode"
           :show-length="showLength"
           :select-on-click-node="selectOnClickNode"
           v-model="value"
@@ -131,7 +136,8 @@ export default {
       showSelectController: true,
       showLength: true,
       showDoubleQuotes: true,
-      showMouseOver: true,
+      highlightMouseoverNode: true,
+      highlightSelectedNode: true,
       selectOnClickNode: true,
       path: 'res',
       deep: 4,
@@ -148,7 +154,7 @@ export default {
       if (newVal === 'single') {
         this.value = 'res.error'
       } else if (newVal === 'multiple') {
-        this.value = ['res', 'res.error']
+        this.value = ['res.error', 'res.data[0].title']
       }
       // 重新渲染, 因为2中情况的v-model格式不同
       this.$nextTick(() => {

src/assets/less/tree.less

@@ -23,6 +23,10 @@
     background-color: @highlight-bg-color;
   }
 
+  &.is-highlight-selected {
+    background-color: darken(@highlight-bg-color, 5%);
+  }
+
   .@{css-prefix}-tree__content {
     padding-left: @content-padding;
     border-left: 1px dotted @border-color;

src/assets/less/var.less

@@ -2,7 +2,7 @@
 @css-prefix: vjs;
 
 /* theme color */
-@color-primary: #20a0ff;
+@color-primary: #1890ff;
 @color-info: #1d8ce0;
 @color-error: #ff4949;
 @color-success: #13ce66;
@@ -14,7 +14,7 @@
 @color-null: @color-error;
 
 /* highlight */
-@highlight-bg-color: #eee;
+@highlight-bg-color: #e6f7ff;
 
 /* common border-color */
 @border-color: #bfcbd9;

src/components/app.vue

@@ -6,6 +6,7 @@
       'is-root': currentDeep === 1,
       'is-selectable': selectable,
       'is-selected': isSelected,
+      'is-highlight-selected': isSelected && highlightSelectedNode,
       'is-mouseover': isMouseover
     }"
     @click.stop="handleClick($event, 'tree')"
@@ -39,7 +40,8 @@
           :deep="deep"
           :show-length="showLength"
           :show-double-quotes="showDoubleQuotes"
-          :show-mouse-over="showMouseOver"
+          :highlight-mouseover-node="highlightMouseoverNode"
+          :highlight-selected-node="highlightSelectedNode"
           :path="path + (Array.isArray(data) ? `[${key}]` : `.${key}`)"
           :path-selectable="pathSelectable"
           :selectable-type="selectableType"
@@ -108,11 +110,6 @@
         type: Boolean,
         default: true
       },
-      // 是否展示鼠标悬浮效果
-      showMouseOver: {
-        type: Boolean,
-        default: false
-      },
       // 数据层级顶级路径
       path: {
         type: String,
@@ -144,6 +141,16 @@
         type: Function,
         default: () => true
       },
+      // highlight current node when mouseover
+      highlightMouseoverNode: {
+        type: Boolean,
+        default: false
+      },
+      // highlight current node when selected
+      highlightSelectedNode: {
+        type: Boolean,
+        default: true
+      },
       /* outer props */
 
       /* inner props */
@@ -264,11 +271,11 @@
       },
 
       handleMouseover () {
-        this.showMouseOver && this.selectable && (this.isMouseover = true)
+        this.highlightMouseoverNode && this.selectable && (this.isMouseover = true)
       },
 
       handleMouseout () {
-        this.showMouseOver && this.selectable && (this.isMouseover = false)
+        this.highlightMouseoverNode && this.selectable && (this.isMouseover = false)
       },
 
       // 是否对象