使用ant-design-vue-tooltip实现内容超出显示,不超超出不显示。但是父元素动态宽度

通过 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);
    }
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值