在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客户端分页实例代码
Nov 18 Javascript
解释&&和||在javascript中的另类用法
Jul 28 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
JS排序之快速排序详解
Apr 08 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
js隐式转换的知识实例讲解
Sep 28 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的命名空间(一)
2018/02/21 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
js实现数字滚动特效
2019/12/16 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
python基于opencv实现人脸识别
2021/01/04 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
经典的班主任推荐信
2013/10/28 职场文书
英语教育专业自荐信
2014/05/29 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL