点击整行也能展开或收起

Author: lycHub

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-virtual-tree",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "Tree component for large amount of data, base on Vue3",
   "scripts": {
     "serve": "vue-cli-service serve --port 4200",
@@ -10,16 +10,18 @@
   },
   "main": "./lib/vue-virtual-tree.common.js",
   "typings": "lib/typings/index.d.ts",
-  "files": ["lib"],
+  "files": [
+    "lib"
+  ],
   "dependencies": {
     "core-js": "^3.6.5",
-    "lodash.clonedeep": "^4.5.0"
+    "lodash-es": "^4.17.21"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@types/lodash.clonedeep": "^4.5.6",
+    "@types/lodash-es": "^4.17.4",
     "@vue/babel-plugin-jsx": "^1.0.3",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-typescript": "~4.5.0",

package.json

@@ -6,6 +6,7 @@ $primary-color: #2d8cf0;
 $assist-color: #bae7ff;
 $disable-color: #c5c8ce;
 $text-color: #333;
+$gray-color-tree: #e7eaef;
 
 $font-size-base: 14px;
 $font-size-mid: $font-size-base + 2;

src/assets/styles/variable.scss

@@ -31,7 +31,8 @@ export default defineComponent({
       }
       return result;
     });
-    const handleClick = () => {
+    const handleClick = (event: MouseEvent) => {
+      event.stopPropagation();
       if (!props.disabled) {
         emit('update:modelValue', !props.modelValue);
         emit('change', !props.modelValue);

src/components/VirtualCheckbox/index.tsx

@@ -13,7 +13,10 @@
       cursor: pointer;
       transition: all .2s ease-in-out;
       &:hover {
-        color: $primary-color;
+        .node-content .node-title {
+          color: $primary-color;
+        }
+        background-color: $gray-color-tree;
       }
       .node-arrow {
         display: inline-block;

src/components/VirtualTree/index.scss

@@ -1,5 +1,5 @@
 import {defineComponent, watch, ref, shallowRef, PropType, h} from 'vue';
-import cloneDeep from 'lodash.clonedeep';
+import { cloneDeep } from 'lodash-es';
 import {nodeKey, TreeNodeInstance, TreeNodeOptions} from "./types";
 import { flattenTree, updateDownwards, updateUpwards } from "./uses";
 import VirTreeNode from './node';

src/components/VirtualTree/index.tsx

@@ -42,7 +42,8 @@ export default defineComponent({
       }
       return result;
     });
-    const handleSelect = () => {
+    const handleSelect = (event: MouseEvent) => {
+      event.stopPropagation();
       if (!props.node.disabled) {
         emit('selectChange', props.node);
       }
@@ -54,7 +55,7 @@ export default defineComponent({
       emit('checkChange', [checked, props.node])
     }
     const renderArrow = (): JSX.Element | null => {
-      return <div class={ ['node-arrow', props.node.expanded ? 'expanded' : ''] } onClick={ handleExpand }>
+      return <div class={ ['node-arrow', props.node.expanded ? 'expanded' : ''] }>
         {
           props.node.hasChildren
             ? props.iconSlot ? props.iconSlot(props.node.loading) : props.node.loading
@@ -92,7 +93,7 @@ export default defineComponent({
     // console.log('iconSlot', props.iconSlot);
     return () => {
       return (
-        <div class="vir-tree-node" style={{ paddingLeft: props.node.level! * 18 + 'px' }}>
+        <div class="vir-tree-node" onClick={ handleExpand } style={{ paddingLeft: props.node.level! * 18 + 'px' }}>
           { renderArrow() }
           { renderContent() }
         </div>