From 2036a9ef6f27ba1e4f7d0fa19237f69712b87b52 Mon Sep 17 00:00:00 2001
From: dingyongya <yahya_dyy@163.com>
Date: Tue, 24 May 2022 19:15:57 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20tooltip,table?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

tooltip 新增isAutoShow属性 目的控制超出文本 `...` 时自动展示， 没有 `...` 时不展示
table 列添加ellipsisTooltip属性时，无 `...`
的不显示tooltip效果
---
 .../component/src/component/popper/index.vue  |  2 ++
 .../component/src/component/table/index.vue   | 13 +++-----
 .../src/component/tooltip/index.less          |  6 ++++
 .../component/src/component/tooltip/index.vue | 26 +++++++++++++--
 .../src/document/zh-CN/components/table.md    |  1 +
 .../src/document/zh-CN/components/tooltip.md  | 33 +++++++++++++++++++
 pnpm-lock.yaml                                |  4 +--
 7 files changed, 72 insertions(+), 13 deletions(-)
 create mode 100644 package/component/src/component/tooltip/index.less

diff --git a/package/component/src/component/popper/index.vue b/package/component/src/component/popper/index.vue
index 9ce72399..eb8074af 100644
--- a/package/component/src/component/popper/index.vue
+++ b/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",
 });
 
diff --git a/package/component/src/component/table/index.vue b/package/component/src/component/table/index.vue
index a85f41d2..290fc619 100644
--- a/package/component/src/component/table/index.vue
+++ b/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>
diff --git a/package/component/src/component/tooltip/index.less b/package/component/src/component/tooltip/index.less
new file mode 100644
index 00000000..53f10472
--- /dev/null
+++ b/package/component/src/component/tooltip/index.less
@@ -0,0 +1,6 @@
+.lay-tooltip-content{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/package/component/src/component/tooltip/index.vue b/package/component/src/component/tooltip/index.vue
index 1772846b..bb4bf9ac 100644
--- a/package/component/src/component/tooltip/index.vue
+++ b/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>
diff --git a/package/document/src/document/zh-CN/components/table.md b/package/document/src/document/zh-CN/components/table.md
index 8b08b022..967e046c 100644
--- a/package/document/src/document/zh-CN/components/table.md
+++ b/package/document/src/document/zh-CN/components/table.md
@@ -39,6 +39,7 @@ export default {
         title:"备注",
         width: "180px",
         key:"remark",
+        ellipsisTooltip: true,
       }
     ]
 
diff --git a/package/document/src/document/zh-CN/components/tooltip.md b/package/document/src/document/zh-CN/components/tooltip.md
index 4d0440ce..bb8e7bec 100644
--- a/package/document/src/document/zh-CN/components/tooltip.md
+++ b/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`   ||
 
 :::
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 97af3052..fa74945f 100644
--- a/pnpm-lock.yaml
+++ b/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