feat: tree node slot 支持 hover 参数 (#890)

WeBankFinTech · Sep 19, 2024 · 7019b2f · 7019b2f
1 parent c6504dc
commit 7019b2f
Show file tree

Hide file tree

Showing 4 changed files with 7,276 additions and 8,802 deletions.
diff --git a/components/tree/treeNode.tsx b/components/tree/treeNode.tsx
@@ -9,6 +9,7 @@ import {
     ref,
 } from 'vue';
 import { isFunction, isUndefined } from 'lodash-es';
+import { useElementHover } from '@vueuse/core';
 import getPrefixCls from '../_util/getPrefixCls';
 import CaretDownOutlined from '../icon/CaretDownOutlined';
 import LoadingOutlined from '../icon/LoadingOutlined';
@@ -216,6 +217,17 @@ export default defineComponent({
                 </span>
             );
         };
+
+        const treeNodeElement = ref();
+
+        const isHovered = useElementHover(treeNodeElement);
+        const slotParams = computed(() => {
+            return {
+                isHovered: isHovered.value,
+                value: props.value,
+            };
+        });
+
         const renderPrefix = () => {
             if (!slots.prefix) {
                 return null;
@@ -225,7 +237,7 @@ export default defineComponent({
                     class={`${prefixCls}-content-prefix`}
                     onClick={handleStopClickPrefix}
                 >
-                    {slots.prefix?.()}
+                    {slots.prefix?.(slotParams.value)}
                 </span>
             );
         };
@@ -238,7 +250,7 @@ export default defineComponent({
                     class={`${prefixCls}-content-suffix`}
                     onClick={handleStopClickPrefix}
                 >
-                    {slots.suffix?.()}
+                    {slots.suffix?.(slotParams.value)}
                 </span>
             );
         };
@@ -269,6 +281,7 @@ export default defineComponent({
 
         return () => (
             <div
+                ref={treeNodeElement}
                 class={classList.value}
                 style={style.value}
                 data-value={props.value}

diff --git a/components/tree/useHover.ts b/components/tree/useHover.ts
diff --git a/docs/.vitepress/components/tree/fix.vue b/docs/.vitepress/components/tree/fix.vue
@@ -17,7 +17,7 @@ function createData(level = 1, baseKey = '', prefix, suffix) {
             value: key,
             children: createData(level - 1, key, prefix, suffix),
             prefix: prefix ? () => h(PictureOutlined) : null,
-            suffix: suffix ? () => h(PlusCircleOutlined) : null,
+            suffix: suffix ? (data) => (data.isHovered ? h(PlusCircleOutlined) : null) : null,
         };
     });
 }