基于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 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
js date 格式化
Feb 15 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
简单的网页广告特效实例
Aug 19 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
对盗链说再见...
2006/10/09 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
Django跨域请求问题的解决方法示例
2018/06/16 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
Python网页解析器使用实例详解
2020/05/30 Python
python实现定时发送邮件
2020/12/23 Python
python xlsxwriter模块的使用
2020/12/24 Python
个人简历中的自我评价怎么写
2014/01/26 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
机械设计毕业生自荐信
2014/02/02 职场文书
工作决心书
2014/03/11 职场文书
聚美优品励志广告词
2014/03/14 职场文书
企业宣传策划方案
2014/05/29 职场文书
企业宣传口号
2014/06/12 职场文书
2014年终个人工作总结
2014/11/07 职场文书
学籍证明模板
2014/11/21 职场文书
护理专业自我评价
2015/03/11 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
Python中字符串对象语法分享
2022/02/24 Python
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers