好资源导航 » 文章资讯 » Vue 实现显示/隐藏层的思路（加全局点击事件）

Vue 实现显示/隐藏层的思路（加全局点击事件）

2023-08-03 17:10:03 88

问题描述：

一个Icon点击出现菜单，点击菜单区域外任何区域菜单收起。
何为优雅的去解决上述问题？

尽可能的采用vue来解决问题
尽可能少的与原生对象发生交互
代码干净、易懂

问题解决思路：

通过Vue的v-show指令决定菜单的显示、隐藏。
通过Document的全局点击事件判断是否该收起
需要优雅的解决几个问题：
禁止点击事件冒泡。采用VUE的@click.stop来解决问题，请参考下方代码
优雅且安全的移除全局事件监听（只有菜单弹出的时候才去监听）

document的事件添加

HTML

JavaScript

总结

以上所述是小编给大家介绍的Vue实现显示/隐藏层的思路（加全局点击事件），希望对大家有所帮助！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

Vue 实现显示/隐藏层的思路（加全局点击事件）

热门推荐

随机推荐