基于Vue中点击组件外关闭组件的实现方法


Posted in Javascript onMarch 06, 2018

Vue定义全局点击函数,参数为点击的回调函数。

Vue.prototype.globalClick = function (callback) { //页面全局点击
 $(document).click(callback);
}

组件挂载后监听全局的点击事件

mounted:function () {
 this.globalClick(this.handleClickOut);
},

隐藏元素。

取到dom节点,判断父级是否存在来判断是否需要来关闭

handleClickOut:function (event) {
 if($(event.target).parents(".sys-add-user-dialog").length == 0){
  //隐藏元素
 }
},

以上这篇基于Vue中点击组件外关闭组件的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery select的操作实现代码
May 06 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
JavaScript中this详解
Sep 01 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
React 组件间的通信示例
Jun 14 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
微信小程序如何连接Java后台
Aug 08 Javascript
Javascript地址引用代码实例解析
Feb 25 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 #Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 #Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 #Javascript
解决vue打包项目后刷新404的问题
Mar 06 #Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
Mar 06 #Javascript
vue使用xe-utils函数库的具体方法
Mar 06 #Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 #jQuery
You might like
ThinkPHP令牌验证实例
2014/06/18 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
javascript分页代码(当前页码居中)
2012/09/20 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
Python生成器generator用法示例
2018/08/10 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
opencv实现简单人脸识别
2021/02/19 Python
Python list运算操作代码实例解析
2020/01/20 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
Python爬取梨视频的示例
2021/01/29 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
金融管理应届生求职信
2014/02/20 职场文书
大学生新学期计划书
2014/04/28 职场文书
体育口号大全
2014/06/18 职场文书
组工干部演讲稿
2014/09/02 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
计划生育工作汇报
2014/10/28 职场文书
受资助学生感谢信
2015/01/21 职场文书
运动会跳远广播稿
2015/08/19 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
Nginx配置之禁止指定IP访问
2022/05/02 Servers