feat: highlight control.

Author: leezng

src/components/Tree/index.vue

@@ -1,12 +1,6 @@
 <template>
   <div
-    :class="{
-      'vjs-tree': true,
-      'is-mouseover': isMouseover,
-      'has-selectable-control': showSelectController
-    }"
-    @mouseover.stop="handleMouseover"
-    @mouseout.stop="handleMouseout"
+    class="vjs-tree"
   >
     <tree-node
       v-for="(item) in flatData"
@@ -98,11 +92,6 @@
         type: Function,
         default: () => true
       },
-      // highlight current node when mouseover
-      highlightMouseoverNode: {
-        type: Boolean,
-        default: false
-      },
       // highlight current node when checked
       highlightSelectedNode: {
         type: Boolean,
@@ -121,7 +110,6 @@
     },
     data () {
       return {
-        isMouseover: false,
         hiddenPaths: jsonFlatten(this.data, this.path).reduce((acc, item) => {
           if ((item.type === 'objectStart' || item.type === 'arrayStart') && item.level === this.deep) {
             return {
@@ -217,15 +205,6 @@
         this.$emit('click', path, content)
       },
 
-      handleMouseover () {
-        // 可选择的树|普通展示树, 都支持mouseover
-        this.highlightMouseoverNode && (this.isMouseover = true)
-      },
-
-      handleMouseout () {
-        this.highlightMouseoverNode && (this.isMouseover = false)
-      },
-
       onBracketsClick (collapsed, path) {
         if (collapsed) {
           this.hiddenPaths = {

src/components/Tree/styles.less

@@ -3,16 +3,4 @@
 .@{css-prefix}-tree {
   font-family: "Monaco", "Menlo", "Consolas", "Bitstream Vera Sans Mono", monospace;
   font-size: 14px;
-
-  &.has-selectable-control {
-    margin-left: @selectabl-span;
-  }
-
-  &.is-mouseover {
-    background-color: @highlight-bg-color;
-  }
-
-  &.is-highlight-selected {
-    background-color: darken(@highlight-bg-color, 5%);
-  }
 }

src/components/TreeNode/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div
-    class="vjs-tree__node"
+    :class="{
+      'vjs-tree__node': true,
+      'is-highlight': highlightSelectedNode && checked
+    }"
     @click="onTreeNodeClick"
   >
     <template v-if="showSelectController && selectable && node.type !== 'objectEnd' && node.type !== 'arrayEnd'">
@@ -103,11 +106,6 @@
         type: Function,
         default: () => true
       },
-      // highlight current node when mouseover
-      highlightMouseoverNode: {
-        type: Boolean,
-        default: false
-      },
       // highlight current node when checked
       highlightSelectedNode: {
         type: Boolean,

src/components/TreeNode/styles.less

@@ -8,6 +8,11 @@
   display: flex;
   position: relative;
 
+  &.is-highlight,
+  &:hover {
+    background-color: @highlight-bg-color;
+  }
+
   .@{css-prefix}-tree__indent {
     flex: 0 0 1em;