fix(@vben/common-ui): text omission component expansion exception (#4139)

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

* chore: 增加点击展开切换的测试

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]);
   });
 });

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;
+  isExpand.value = !isExpand.value;
-  const isExpanded = !style['-webkit-line-clamp'];
+  emit('expandChange', isExpand.value);
-  if (props.tooltip) {
-    showTooltip.value = !isExpanded;
-  }
-
-  nextTick(() => {
-    style['-webkit-line-clamp'] = isExpanded ? props.line : '';
-  });
-
-  emit('expandChange', !isExpanded);
 }
 
 function handleExpand() {
-  if (props.expand) {
+  props.expand && onExpand();
-    onExpand();
-  } else {
-    return false;
-  }
 }
 </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"