基于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 相关文章推荐
JavaScript DOM 添加事件
Feb 14 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
vue快捷键与基础指令详解
Jun 01 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
JavaScript实现简单的计算器
Jan 16 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从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
PHP 图片处理
2020/09/16 PHP
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python简单贪吃蛇开发
2019/01/28 Python
Django单元测试工具test client使用详解
2019/08/02 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
什么是Assembly(程序集)
2014/09/14 面试题
销售类个人求职信范文
2013/09/25 职场文书
战友聚会主持词
2014/04/02 职场文书
社区矫正工作方案
2014/06/04 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
获奖感言怎么写
2015/07/31 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python