✨(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>

package/document/src/document/zh-CN/components/table.md

@@ -39,6 +39,7 @@ export default {
         title:"备注",
         width: "180px",
         key:"remark",
+        ellipsisTooltip: true,
       }
     ]
 

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

@@ -6,6 +6,38 @@
 
 ::: demo
 
+<template>
+<div style="width: 125px; ">
+ <lay-tooltip content="假装这里有文字提示" ref="tooltip" :isAutoShow="true">
+      假装这里有文字提示
+  </lay-tooltip>
+</div>
+<div style="width: 126px; margin-top: 20px">
+ <lay-tooltip content="假装这里有文字提示" ref="tooltip" :isAutoShow="true">
+      假装这里有文字提示
+  </lay-tooltip>
+</div>
+</template>
+
+<script>
+  import { ref } from 'vue';
+
+export default {
+setup() {
+
+    }
+}
+</script>
+
+<style>
+</style>
+:::
+
+::: title 基础使用
+:::
+
+::: demo
+
 <template>
   <lay-tooltip content="假装这里有文字提示">
     <lay-button>tooltip</lay-button>
@@ -125,6 +157,7 @@
 | isDark      | 是否为黑色主题 | `true`(默认值)、`false`(浅色)   |
 | disabled    | 是否禁用 | `false`(默认值)、`true`(禁用)   ||
 | isCanHide   | 控制是否可以隐藏,可参考`lay-slider`组件 | `true`(默认值)、`false`   ||
+| isAutoShow   | 控制超出文本 `...` 时自动展示， 没有 `...` 时不展示 | `false`(默认值)、`true`   ||
 
 :::
 

pnpm-lock.yaml

@@ -71,8 +71,8 @@ importers:
 
   package/component:
     specifiers:
-      '@layui/icons-vue': ^1.0.8
-      '@layui/layer-vue': ^1.3.13
+      '@layui/icons-vue': ^1.0.9
+      '@layui/layer-vue': ^1.3.14
       '@vueuse/core': ^8.5.0
       animate.css: ^4.1.1
       async-validator: ^4.1.1