✨(component): tooltip,table

tooltip 新增isAutoShow属性 目的控制超出文本 `...` 时自动展示， 没有 `...` 时不展示
table 列添加ellipsisTooltip属性时，无 `...`
的不显示tooltip效果

package/component/src/component/popper/index.vue

@@ -35,6 +35,7 @@ export interface LayPopperProps {
   isDark?: boolean;
   disabled?: boolean;
   isCanHide?: boolean;
+  isAutoShow?: boolean;
 }
 
 const props = withDefaults(defineProps<LayPopperProps>(), {
@@ -43,6 +44,7 @@ const props = withDefaults(defineProps<LayPopperProps>(), {
   disabled: false,
   enterable: true,
   isCanHide: true,
+  isAutoShow: false,
   trigger: "hover",
 });
 

package/component/src/component/table/index.vue

@@ -354,13 +354,9 @@ onMounted(() => {
                           <lay-tooltip
                             v-if="column.ellipsisTooltip"
                             :content="data[column.key]"
+                            :isAutoShow="true"
                           >
-                            <div class="layui-table-call-ellipsis">
-                              <slot
-                                :name="column.customSlot"
-                                :data="data"
-                              ></slot>
-                            </div>
+                            <slot :name="column.customSlot" :data="data"></slot>
                           </lay-tooltip>
                           <slot
                             v-else
@@ -388,10 +384,9 @@ onMounted(() => {
                             <lay-tooltip
                               v-if="column.ellipsisTooltip"
                               :content="data[column.key]"
+                              :isAutoShow="true"
                             >
-                              <div class="layui-table-call-ellipsis">
-                                {{ data[column.key] }}
-                              </div>
+                              {{ data[column.key] }}
                             </lay-tooltip>
                             <span v-else> {{ data[column.key] }} </span>
                           </td>

package/component/src/component/tooltip/index.less

@@ -0,0 +1,6 @@
+.lay-tooltip-content{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}

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

@@ -1,9 +1,13 @@
 <template>
-  <slot></slot>
+  <div v-if="isAutoShow" class="lay-tooltip-content" ref="refTooltip">
+    <span><slot></slot></span>
+  </div>
+  <slot v-else></slot>
   <lay-popper v-if="isMounted" v-bind="innerProps"></lay-popper>
 </template>
 
 <script lang="ts">
+import "./index.less";
 import LayPopper from "../popper/index.vue";
 import { defineComponent, ref } from "vue";
 export default defineComponent({
@@ -32,11 +36,17 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    isAutoShow: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup() {
     const isMounted = ref(false);
+    const refTooltip = ref(null);
     return {
       isMounted,
+      refTooltip,
     };
   },
   computed: {
@@ -45,7 +55,19 @@ export default defineComponent({
     },
   },
   mounted() {
-    this.$nextTick(() => (this.isMounted = true));
+    this.$nextTick(() => {
+      if (this.refTooltip) {
+        if (
+          this.refTooltip.offsetWidth >= this.refTooltip.firstChild.offsetWidth
+        ) {
+          this.isMounted = false;
+        } else {
+          this.isMounted = true;
+        }
+      } else {
+        this.isMounted = true;
+      }
+    });
   },
 });
 </script>