基于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无法执行的解决办法
Feb 25 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
Node 代理访问的实现
Sep 19 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
smarty内置函数section的用法
2015/01/22 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
JavaScript 乱码问题
2009/08/06 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
python执行外部程序的常用方法小结
2015/03/21 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
Python Pandas 箱线图的实现
2019/07/23 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
详解python中的异常捕获
2020/12/15 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
创业计划书——互联网商机
2014/01/12 职场文书
护士辞职信模板
2014/01/20 职场文书
青年文明号服务承诺
2014/03/31 职场文书
python迷宫问题深度优先遍历实例
2021/06/20 Python