refactor: 🎨hover 更加合理

demo/demo.vue

@@ -101,7 +101,7 @@ let id = 0;
 
 const ganttData = reactive<any>([]);
 
-for (let i = 0; i < 15; i++) {
+for (let i = 0; i < 5; i++) {
   onAdd();
 }
 

package.json

@@ -71,7 +71,7 @@
     "@vueuse/core": "^10.0.0",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
-    "vue": "3.2.25"
+    "vue": "^3.2.47"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.1",

src/components/common/Row.vue

@@ -19,8 +19,8 @@
       backgroundColor: props.renderStyle ? ($styleBox.levelColor[props.data!.level] ?? undefined) : undefined,
       ...$styleBox.getBorderColor()
     }"
-    @pointerenter.stop="onEnter"
-    @pointerleave.stop="onLeave"
+    @mouseenter.capture="onEnter"
+    @mouseleave="onLeave"
     @click="onClick"
     @dblclick="onDblClick"
   >
@@ -47,6 +47,8 @@ function onEnter() {
 }
 
 function onLeave() {
+  if (!props.renderStyle) return;
+
   $param.hoverItem = null;
 }
 

src/composables/useParam.ts

@@ -1,9 +1,23 @@
+// import type RowItem from '@/models/data/row';
 import useStore from '@/store';
+// import { computed, ref } from 'vue';
+
+// const _hoverItem = ref<RowItem | null>(null);
 
 export default () => {
   const store = useStore();
 
+  // const hoverItem = computed<RowItem>(() => _hoverItem.value as RowItem);
+  // const setHover = (item: RowItem | null) => {
+  //   console.log('setHover', item);
+
+  //   _hoverItem.value = item;
+  // };
+
   return {
     $param: store.$param
+
+    // hoverItem,
+    // setHover
   };
 };