perf: 文本省略组件逻辑调整

src/components/text-over-tips/index.vue

@@ -1,14 +1,21 @@
 <template>
   <Tooltip
-    :disabled="isShowBtn || (!isShowBtn && disabled)"
+    :open="open"
     :placement="props.placement"
-    :mouseEnterDelay="props.mouseEnterDelay"
-    :mouseLeaveDelay="props.mouseLeaveDelay"
   >
     <template #title>
       <div :style="contentStyle" class="tip-content">{{ props.context }}</div>
     </template>
-    <div v-bind="$attrs" ref="Text" :class="`${isShow ? '' : `line-${props.line}`} `" class="overflow-text">
+    <div
+      v-bind="$attrs"
+      ref="Text"
+      :class="`${isShow ? '' : `line-${props.line}`} `"
+      class="overflow-text"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="
+        handleMouseLeave
+      "
+    >
       {{ props.context }}
     </div>
     <div
@@ -49,19 +56,16 @@ const props = defineProps({
   },
   placement: {
     type: String,
-    default: 'bottom',
+    default: 'top',
   },
   line: {
     type: Number,
     default: 1,
   },
+  // 显示延迟时间，毫秒级
   mouseEnterDelay: {
     type: Number,
-    default: 0.01,
-  },
-  mouseLeaveDelay: {
-    type: Number,
-    default: 0,
+    default: 100,
   },
   maxHeight: {
     type: [String, Number],
@@ -76,10 +80,17 @@ const props = defineProps({
     default: false,
   },
 });
+
 const data = reactive({});
 const isShow = ref(false);
+const open = ref(false);
+const disabled = ref(false);
+const Text = ref(null);
+const textWidth = ref();
+const timer = ref(null);
+
 const contentStyle = computed(() => {
-  let style = {
+  const style = {
     'max-height': props.maxHeight + 'px',
     'max-width': props.maxWidth + 'px',
     overflow: 'auto',
@@ -87,9 +98,10 @@ const contentStyle = computed(() => {
   };
   return props.maxHeight || props.maxWidth ? style : {};
 });
-const disabled = ref(true);
-const Text = ref(null);
-const textWidth = ref();
+const notShowTooltip = computed(() => {
+  return props.isShowBtn || (!props.isShowBtn && disabled.value);
+});
+
 watch(
   [() => props.context, textWidth],
   async () => {
@@ -117,7 +129,24 @@ watch(
     immediate: true,
   },
 );
-onBeforeMount(() => {});
+
+const clearTimer = () => {
+  if (timer.value) {
+    clearTimeout(timer.value);
+  }
+};
+const handleMouseEnter = () => {
+  clearTimer();
+  timer.value = setTimeout(() => {
+    open.value = !notShowTooltip.value;
+  }, props.mouseEnterDelay);
+};
+
+const handleMouseLeave = () => {
+  clearTimer();
+  open.value = false;
+};
+
 onMounted(async () => {
   await nextTick();
   const erd = elementResizeDetectorMaker();
@@ -128,7 +157,10 @@ onMounted(async () => {
     });
   }
 });
-watchEffect(() => {});
+onUnmounted(() => {
+  clearTimer();
+});
+
 defineExpose({
   ...toRefs(data),
 });