From e8dff517bad67166da9e01db64efe42e673faff7 Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Tue, 13 Aug 2024 20:58:47 +0800
Subject: [PATCH] fix(@vben/common-ui): text omission component expansion
 exception (#4139)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(@vben/common-ui): 修复文本省略组件展开异常

* chore: 增加点击展开切换的测试
---
 .../__tests__/ellipsis-text.test.ts           |  9 ++++-
 .../ellipsis-text/ellipsis-text.vue           | 34 ++++++-------------
 2 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/packages/effects/common-ui/src/components/ellipsis-text/__tests__/ellipsis-text.test.ts b/packages/effects/common-ui/src/components/ellipsis-text/__tests__/ellipsis-text.test.ts
index b297c3c9..9e2d13b8 100644
--- a/packages/effects/common-ui/src/components/ellipsis-text/__tests__/ellipsis-text.test.ts
+++ b/packages/effects/common-ui/src/components/ellipsis-text/__tests__/ellipsis-text.test.ts
@@ -31,9 +31,16 @@ describe('ellipsis-text.vue', () => {
         default: 'This is a very long text that should be truncated.',
       },
     });
-
     const ellipsis = wrapper.find('.truncate');
+
+    // 点击 ellipsis，应该触发 expandChange，参数为 false
     await ellipsis.trigger('click');
     expect(wrapper.emitted('expandChange')).toBeTruthy();
+    expect(wrapper.emitted('expandChange')?.[0]).toEqual([true]);
+
+    // 再次点击，应该触发 expandChange，参数为 false
+    await ellipsis.trigger('click');
+    expect(wrapper.emitted('expandChange')?.length).toBe(2);
+    expect(wrapper.emitted('expandChange')?.[1]).toEqual([false]);
   });
 });
diff --git a/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue b/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
index f57cccc9..4455a00a 100644
--- a/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
+++ b/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, type CSSProperties, nextTick, ref, watchEffect } from 'vue';
+import { computed, type CSSProperties, ref, watchEffect } from 'vue';
 
 import { VbenTooltip } from '@vben-core/shadcn-ui';
 
@@ -72,12 +72,10 @@ const textMaxWidth = computed(() => {
   }
   return props.maxWidth;
 });
-const showTooltip = ref(false);
 const ellipsis = ref();
+const isExpand = ref(false);
 const defaultTooltipMaxWidth = ref();
-watchEffect(() => {
-  showTooltip.value = props.tooltip;
-});
+
 watchEffect(
   () => {
     if (props.tooltip && ellipsis.value) {
@@ -88,25 +86,12 @@ watchEffect(
   { flush: 'post' },
 );
 function onExpand() {
-  const { style } = ellipsis.value;
-  const isExpanded = !style['-webkit-line-clamp'];
-  if (props.tooltip) {
-    showTooltip.value = !isExpanded;
-  }
-
-  nextTick(() => {
-    style['-webkit-line-clamp'] = isExpanded ? props.line : '';
-  });
-
-  emit('expandChange', !isExpanded);
+  isExpand.value = !isExpand.value;
+  emit('expandChange', isExpand.value);
 }
 
 function handleExpand() {
-  if (props.expand) {
-    onExpand();
-  } else {
-    return false;
-  }
+  props.expand && onExpand();
 }
 </script>
 <template>
@@ -118,7 +103,7 @@ function handleExpand() {
       color: tooltipColor,
       backgroundColor: tooltipBackgroundColor,
     }"
-    :disabled="!showTooltip"
+    :disabled="!props.tooltip || isExpand"
     :side="placement"
   >
     <slot name="tooltip">
@@ -133,7 +118,10 @@ function handleExpand() {
           ['inline-block truncate']: line === 1,
           [$style.ellipsisMultiLine]: line > 1,
         }"
-        :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
+        :style="{
+          '-webkit-line-clamp': isExpand ? '' : line,
+          'max-width': textMaxWidth,
+        }"
         class="cursor-text overflow-hidden"
         @click="handleExpand"
         v-bind="$attrs"