@lx-frontend/wrap-element-ui 1.0.1-beta.5 → 1.0.1-beta.7

package/src/components/EditableTable/{useCellHover.ts → bizHooks/useCellHover.ts}

@@ -1,72 +1,72 @@
-import debounce from 'lodash/debounce';
-import throttle from 'lodash/throttle';
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-
-export default function useCellHover(tableDomRef) {
-
-  // 鼠标悬浮的行
-  const hoveringCellInfo = ref<{
-    rowIndex: number;
-    columnProperty: string;
-  }>({ rowIndex: -1, columnProperty: ''});
-
-  const isMouseWheeling = ref(false);
-
-  onMounted(() => {
-    tableDomRef.value.$el.addEventListener('mouseleave', resetHoveringCellInfo);
-    document.addEventListener('wheel', throttledHandleMouseWheel);
-  })
-
-  onBeforeUnmount(() => {
-    tableDomRef.value.$el.removeEventListener('mouseleave', resetHoveringCellInfo);
-    document.removeEventListener('wheel', throttledHandleMouseWheel);
-  })
-
-  const setCellClassName = ({ column, rowIndex }) => {
-    // hoving-cell-[name]-[rowIndex]
-    if (!column.property) return '';
-    return `hoving-cell-(${column.property})-(${rowIndex})`;
-  }
-
-  const resetHoveringCellInfo = () => {
-    hoveringCellInfo.value = {
-      rowIndex: -1,
-      columnProperty: ''
-    };
-  }
-
-  let timerHandler: any = null
-  // 性能考虑，在鼠标滚动时，停止处理cell的hover事件
-  const handleMouseWheel = () => {
-    isMouseWheeling.value = true;
-    clearTimeout(timerHandler);
-    // 停止滚动后，恢复hover事件
-    timerHandler = setTimeout(() => {
-      isMouseWheeling.value = false;
-    }, 100)
-  }
-  const throttledHandleMouseWheel = throttle(handleMouseWheel, 50);
-
-  const handleCellMouseEnter = (row, column, cell, event) => {
-    // 性能考虑，表格滚动时会不断触发该事件，导致滚动性能变差
-    if (isMouseWheeling.value) return
-
-    const className = [...event.target.classList].find(c => /hoving-cell-\(\w+\)-\(\d+\)/.test(c))
-    if (!className) return;
-    // 正则匹配括号中的内容
-    const matchArr = className.match(/hoving-cell-\((\w+)\)-\((\d+)\)/);
-
-    hoveringCellInfo.value = {
-      rowIndex: +matchArr?.[2],
-      columnProperty: matchArr?.[1]
-    }
-  }
-
-  const debouncedHoverHandler = debounce(handleCellMouseEnter, 10);
-
-  return {
-    hoveringCellInfo,
-    setCellClassName,
-    debouncedHoverHandler
-  }
+import debounce from 'lodash/debounce';
+import throttle from 'lodash/throttle';
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+export default function useCellHover(tableDomRef) {
+
+  // 鼠标悬浮的行
+  const hoveringCellInfo = ref<{
+    rowIndex: number;
+    columnProperty: string;
+  }>({ rowIndex: -1, columnProperty: ''});
+
+  const isMouseWheeling = ref(false);
+
+  onMounted(() => {
+    tableDomRef.value.$el.addEventListener('mouseleave', resetHoveringCellInfo);
+    document.addEventListener('wheel', throttledHandleMouseWheel);
+  })
+
+  onBeforeUnmount(() => {
+    tableDomRef.value.$el.removeEventListener('mouseleave', resetHoveringCellInfo);
+    document.removeEventListener('wheel', throttledHandleMouseWheel);
+  })
+
+  const setCellClassName = ({ column, rowIndex }) => {
+    // hoving-cell-[name]-[rowIndex]
+    if (!column.property) return '';
+    return `hoving-cell-(${column.property})-(${rowIndex})`;
+  }
+
+  const resetHoveringCellInfo = () => {
+    hoveringCellInfo.value = {
+      rowIndex: -1,
+      columnProperty: ''
+    };
+  }
+
+  let timerHandler: any = null
+  // 性能考虑，在鼠标滚动时，停止处理cell的hover事件
+  const handleMouseWheel = () => {
+    isMouseWheeling.value = true;
+    clearTimeout(timerHandler);
+    // 停止滚动后，恢复hover事件
+    timerHandler = setTimeout(() => {
+      isMouseWheeling.value = false;
+    }, 100)
+  }
+  const throttledHandleMouseWheel = throttle(handleMouseWheel, 50);
+
+  const handleCellMouseEnter = (row, column, cell, event) => {
+    // 性能考虑，表格滚动时会不断触发该事件，导致滚动性能变差
+    if (isMouseWheeling.value) return
+
+    const className = [...event.target.classList].find(c => /hoving-cell-\(\w+\)-\(\d+\)/.test(c))
+    if (!className) return;
+    // 正则匹配括号中的内容
+    const matchArr = className.match(/hoving-cell-\((\w+)\)-\((\d+)\)/);
+
+    hoveringCellInfo.value = {
+      rowIndex: +matchArr?.[2],
+      columnProperty: matchArr?.[1]
+    }
+  }
+
+  const debouncedHoverHandler = debounce(handleCellMouseEnter, 10);
+
+  return {
+    hoveringCellInfo,
+    setCellClassName,
+    debouncedHoverHandler
+  }
 }