From e7b009786b0de75de88bbfd133ba7a42e8821ecd Mon Sep 17 00:00:00 2001 From: Netfan 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' },