From e7b009786b0de75de88bbfd133ba7a42e8821ecd Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Wed, 12 Feb 2025 14:25:12 +0800
Subject: [PATCH] fix: width for ellipsisText tooltip in popover content
 (#5517)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 修复省略文本用在气泡中时，提示弹出层的宽度计算有误的问题
---
 .../src/components/ellipsis-text/ellipsis-text.vue        | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

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 3d3d2857..b32c5dfa 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
@@ -5,6 +5,8 @@ import { computed, ref, watchEffect } from 'vue';
 
 import { VbenTooltip } from '@vben-core/shadcn-ui';
 
+import { useElementSize } from '@vueuse/core';
+
 interface Props {
   /**
    * 是否启用点击文本展开全部
@@ -78,11 +80,13 @@ const ellipsis = ref();
 const isExpand = ref(false);
 const defaultTooltipMaxWidth = ref();
 
+const { width: eleWidth } = useElementSize(ellipsis);
+
 watchEffect(
   () => {
-    if (props.tooltip && ellipsis.value) {
+    if (props.tooltip && eleWidth.value) {
       defaultTooltipMaxWidth.value =
-        props.tooltipMaxWidth ?? ellipsis.value.offsetWidth + 24;
+        props.tooltipMaxWidth ?? eleWidth.value + 24;
     }
   },
   { flush: 'post' },