木灵鱼儿

木灵鱼儿

阅读：2599

最后更新：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元素。

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

修复后的效果

文章分类 vue 项目实战
文章标签 elementdialogTooltipDrawer
木灵鱼儿

木灵鱼儿

发布了 716 篇文章获得点赞 4获得阅读 2599

版权申明

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

one
two
three

关于作者

站点职位 博主
获得点赞 4
文章被阅读 2599

相关文章

利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类
利用typescript实现原生css变量的主题切换功能类利用typescript实现原生css变量的主题切换功能类
typecho主题开发：基于webpack5的多页面打包项目typecho主题开发：基于webpack5的多页面打包项目