木灵鱼儿

木灵鱼儿

阅读:389

最后更新:2021/06/19/ 12:02:06

关于element Tooltip组件与 Drawer和Dialog这种带遮罩层的冲突问题

问题

当通过Tooltip组件,click事件触发抽屉或者弹窗功能时,Tooltip的hover效果,会在抽屉和弹窗功能关闭后又再次触发显示。

bug图

解决思路

我估计是因为遮罩层的问题,导致元素的事件监听不到鼠标离开,导致关闭弹窗后,浏览器又自动选中了。

所以我的解决办法很简单,找到那个触发hover效果的dom元素,对他进行离开事件触发即可。

<el-tooltip effect="dark" content="通知" placement="bottom">
        <a href="javascript:;" @click="onOpenNotification"></a>
</el-tooltip>

a元素就是tooltip 的触发对象,a被click点击是,会让弹窗组件显示,同时我们还需要对它进行事件触发

onOpenNotification(event) {
  this.openNotification = true;  //弹窗显示
  event.target.blur(); //去除重复显示tooptis
},

如果存在子元素,我们可以通过currentTarget获取到绑定事件的元素,从而获取到tooltip 的触发对象

onOpenNotification(event) {
  this.openNotification = true;  //弹窗显示
  event.currentTarget.blur(); //去除重复显示tooptis
},

说明:

我这边也只是应对这种单一情况,有的可能被click点击触发的并不是tooltip的触发元素,可能是其他元素,具体这种情况,可以使用ref的方式获取触发的dom元素。

当然这也是抛砖引玉,不同的使用场景可能会有不同,但是原理是相同的。

修复后的效果

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 2
文章被阅读 389

相关文章