fix: width for ellipsisText tooltip in popover content (#5517)
* 修复省略文本用在气泡中时,提示弹出层的宽度计算有误的问题
This commit is contained in:
parent
5262233312
commit
e7b009786b
@ -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' },
|
||||||
|
Loading…
Reference in New Issue
Block a user