基于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 相关文章推荐
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 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
PHP 加密与解密的斗争
2009/04/17 PHP
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
javascript学习网址备忘
2007/05/29 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证
2014/09/01 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
javascript的this关键字详解
2019/05/20 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
[00:16]热血竞技场
2019/03/06 DOTA
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
python数据抓取3种方法总结
2021/02/07 Python
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
耐克中国官方商城:Nike中国
2018/10/18 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
劳动模范事迹材料
2014/01/19 职场文书
上党课的心得体会
2014/09/02 职场文书
画展邀请函
2015/01/31 职场文书
庐山导游词
2015/02/03 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技