在Vue组件中获取全局的点击事件方法
更新时间：2018年09月06日 08:42:40 作者：键盘上的草根舞者
今天小编就为大家分享一篇在Vue组件中获取全局的点击事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用场景：
在Vue组件中点击某元素之外的地方移除该元素
需求：
如上图所示，“用户列表”页面有三个Vue组件组成，分别是“菜单组件”，“导航组件”和“列表组件”。其中“列表组件”中包含一个“下拉菜单”，当我们点击“下拉菜单”以外的区域隐藏下拉菜单。
解决方法一：
出现“下拉菜单”的同时，建一个透明的遮罩层，然后只有“下拉菜单”可以点，点击遮罩层就隐藏。
缺点：z-index层数要控制好，还有就是如果点击其他功能按钮，会失效，因为有遮罩层，导致要点击两次才有效。
解决方法二：
局部监听，给“列表组件”最外层的盒子加个点击事件，隐藏下拉菜单。并且对“下拉菜单”的事件要阻止事件冒泡。
缺点：点击“列表组件”区域有效，点击“菜单组件”和“导航组件”区域无效。
解决方法三（推荐）：
第一步：定义Vue全局点击函数
// 定义全局点击函数
Vue.prototype.globalClick = function (callback) {
document.getElementById('main').onclick = function () {
callback();
};
};
tips：
1、参数为点击的回调函数。
2、Vue中通过getElementsByTagName获取不到body节点，还不知道是什么原因。
第二步：在组件中监听全局的点击事件
mounted: function () {
this.globalClick(this.moreSetupMenuRemove);
}
tips：mounted是Vue生命周期钩子中的DOM渲染完成阶段。
第三步：进行操作
// 移除操作
moreSetupMenuRemove () {
this.$refs.moreSetupMenu.style.display = 'none';
},
如果有更好的方法，欢迎交流！
以上这篇在Vue组件中获取全局的点击事件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例
这篇文章主要介绍了vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-11-11
详解Vue3.0 + TypeScript + Vite初体验
这篇文章主要介绍了详解Vue3.0 + TypeScript + Vite初体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了vue3+vite应用中添加sass预处理器问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要为大家详细介绍了vue实现带复选框的树形菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要为大家介绍了vite的proxy查看真实请求地址方式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
今天小编就为大家分享一篇vue.js 实现a标签href里添加参数，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了VUE v-bind 数据绑定,简单点来说就是对 HTML 中的元素，我们可以使用 v-bind 来进行绑定和动态的数据输出，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue项目动态设置页面title及是否缓存页面的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
这篇文章主要介绍了如何在 Vue 中集成 Mozilla/PDF.js ，实现自定义的 PDF 预览器，以及给被预览的 PDF 添加水印2021-01-01
下面小编就为大家分享一篇vue.js 嵌套循环、if判断、动态删除的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论