解决tooltip 不立即消失问题

vue3 在运用 element-plus 中 tooltip组件时,发现 提示信息有时会延迟消失,页面效果显示不友好,如下:
在这里插入图片描述
发现使用了 :hide-after =“0” 也没效果

问题现象在这里插入图片描述
办法: 运用 @scroll=“handleScroll” +:disabled 属性来解决
在这里插入图片描述

const visible = ref(false)
const handleScroll = () => {
  visible.value = true
  setTimeout(() => {
    visible.value = false
  }, 10); // 10 毫秒后提示信息消失
}

给父元素加滚动事件。
初始化默认disabled是false,这样还可以正常使用提示信息。当进行滚动时立即设置为true,这样就会消失了,然后再定时一个较短的时间设置为false,这样就不会影响其他和效果了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值