通过 e.target.scrollWidth <= e.target.offsetWidth 判断内容是否溢出。
通过ant-design-vue tooltip 的 @mouseenter事件
到这里,如果父元素是固定宽度,那么就完成了。
如果父元素是动态改变的,那么,当父元素宽度动态变化时,还是保持上次的记录,因为pointerEvents已经为none,鼠标移入事件不被触发。
所以要加 上 e.target.style.pointerEvents = 'auto'; 恢复事件,这样就可以每次进入重新判断是否超出
let timer = null;
const overflowNameShow = (e: any) => {
if (e.target.scrollWidth <= e.target.offsetWidth) {
e.target.style.pointerEvents = 'none';
e.stopPropagation();
e.preventDefault();
timer = setTimeout(() => {
e.target.style.pointerEvents = 'auto';//恢复事件
}, 300);
}
};