fix: width for ellipsisText tooltip in popover content (#5517)

* 修复省略文本用在气泡中时,提示弹出层的宽度计算有误的问题
This commit is contained in:
Netfan 2025-02-12 14:25:12 +08:00 committed by GitHub
parent 5262233312
commit e7b009786b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

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