🐛(component): tooltip

修复文缩小浏览器窗口时文字出现...时鼠标放上去不会显示tooltip问题

package/component/src/component/tooltip/index.vue

@@ -10,6 +10,7 @@
 import "./index.less";
 import LayPopper from "../popper/index.vue";
 import { defineComponent, ref } from "vue";
+import { useEventListener } from "@vueuse/core";
 export default defineComponent({
   name: "LayTooltip",
   components: {
@@ -43,7 +44,7 @@ export default defineComponent({
   },
   setup() {
     const isMounted = ref(false);
-    const refTooltip = ref(null);
+    const refTooltip = ref<any>(null);
     return {
       isMounted,
       refTooltip,
@@ -55,11 +56,20 @@ export default defineComponent({
     },
   },
   mounted() {
+    if (this.isAutoShow) {
+      useEventListener("resize", () => {
+        this.setEllipsis();
+      });
+    }
     this.$nextTick(() => {
+      this.setEllipsis();
+    });
+  },
+  methods: {
+    setEllipsis() {
       if (this.refTooltip) {
-        if (
-          this.refTooltip.offsetWidth >= this.refTooltip.firstChild.offsetWidth
-        ) {
+        let tooltipHtml = this.refTooltip;
+        if (tooltipHtml.offsetWidth >= tooltipHtml.firstChild.offsetWidth) {
           this.isMounted = false;
         } else {
           this.isMounted = true;
@@ -67,7 +77,7 @@ export default defineComponent({
       } else {
         this.isMounted = true;
       }
-    });
+    },
   },
 });
 </script>

package/document-component/src/document/zh-CN/components/tooltip.md

@@ -7,7 +7,12 @@
 ::: demo
 
 <template>
-<div style="width: 125px; ">
+<div style="max-width: 100%; ">
+ <lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" ref="tooltip" :isAutoShow="true">
+      假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示
+  </lay-tooltip>
+</div>
+<div style="max-width: 129px;  margin-top: 20px">
  <lay-tooltip content="假装这里有文字提示" ref="tooltip" :isAutoShow="true">
       假装这里有文字提示
   </lay-tooltip>