Ant Design Vue文字溢出鼠标滑上显示tooltip。不溢出,鼠标滑上不显示tooltip,溢出显示tooltip
<template slot="testContent"
slot-scope="{record}">
<a-tooltip @mouseenter="showToolTip"
overlayClassName="customtooltip_class"
destroyTooltipOnHide>
<template slot="title">
{{record.testContent}}
</template>
<p class="test-content">{{record.testContent}}</p>
</a-tooltip>
</template>
showToolTip (e) {
if(!e.target)return;
const { clientWidth, scrollWidth } = e.target;
if (clientWidth >= scrollWidth) {
e.target.style.pointerEvents = "none"; // 阻止鼠标事件
}
}
// 获取元素的宽度,包括内边距,但不包括边框、滚动条和外边距
var clientWidth = myElement.clientWidth;
// 获取元素的滚动宽度,包括内容的实际宽度,但不包括边框和内边距
var scrollWidth = myElement.scrollWidth;
主要是获取元素的宽度和滚动宽度,通过这2个值来判断元素内容是否溢出

浙公网安备 33010602011771号