在Vue组件中获取全局的点击事件方法


Posted in Javascript onSeptember 06, 2018

使用场景:

在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组件中获取全局的点击事件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
java必学必会之static关键字
Dec 03 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 #jQuery
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 #Javascript
Vue中使用clipboard实现复制功能
Sep 05 #Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 #Javascript
Vue-cli@3.0 插件系统简析
Sep 05 #Javascript
vue实现点击选中,其他的不选中方法
Sep 05 #Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 #Javascript
You might like
PHP数据库操作面向对象的优点
2006/10/09 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
学习ExtJS 访问容器对象
2009/10/07 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
javascript连续赋值问题
2015/07/08 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
用Python中的字典来处理索引统计的方法
2015/05/05 Python
python 获取网页编码方式实现代码
2017/03/11 Python
Python3.5运算符操作实例详解
2019/04/25 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
在家更换处方镜片:Lensabl
2019/05/01 全球购物
工地安全检查制度
2014/02/04 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
新员工入职欢迎词
2015/01/23 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
婚宴新郎致辞
2015/07/28 职场文书
公司酒会致辞
2015/07/30 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python