vue2.0点击其他任何地方隐藏dom
methods: {
handleBodyClick(){
if (绿色区域出来了,要判断点击其他地方就要关闭,这样可以避免绿色区域已经关闭还在操作) {
let _con = $(目标区域)
if (!_con.is(e.target) && _con.has(e.target).length === 0) {
// 点击目标区域外的时候关闭绿色区域
}
}
},
},
mounted () {
document.addEventListener('click', this.handleBodyClick)
},
destroyed () {
document.removeEventListener('click', this.handleBodyClick)
}
原文参考《vue点击其它任何地方隐藏dom》
另外有一种隐藏整个组件的,比较适合一个弹出层是一个组件的情况
mounted () {
document.addEventListener('click', this.handleDocumentClick)
},
methods: {
handleDocumentClick (e) {
if (!this.$el.contains(e.target)) {
this.isShow = false
}
}
},
destroyed () {
document.removeEventListener('click', this.handleDocumentClick)
}
vue2.0点击其他任何地方隐藏dom的更多相关文章
- android 实现点击listview 空白地方隐藏菜单
思路:重写ListView的setOnTouchListener事件: ListView.setOnTouchListener(new OnTouchListener(){ @Override pub ...
- 点击页面其它地方隐藏div所想到的jQuery的delegate
在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...
- jquery实现点击页面其他地方隐藏指定元素
代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta ...
- 由点击页面其它地方隐藏div所想到的jQuery的delegate
对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...
- jQuery 实现点击页面其他地方隐藏菜单
点击页面其它地方隐藏id为messageList的div 代码: $('body').delegate("#message", 'click', function(e) { var ...
- 点击页面其它地方隐藏该div的方法
思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...
- 点击页面其它地方隐藏该div的两种思路
思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...
- vue2.0中,由于页面完成之后dom还未加载完成如何进行操作
再vue中,当页面加载完成以后,dom还没有加载,是无法获取进行操作的,但是在vue2.0中提供了一个方法:this.$nextTick,在这个回调函数里面写dom操作即可: 如下代码: create ...
- vue 点击其他地方隐藏dom
document.addEventListener('click', function (e) { if (document.getElementsByClassName('keywordContai ...
随机推荐
- 《转》谈谈基于Kerberos的Windows Network Authentication
http://www.cnblogs.com/artech/archive/2007/07/05/807492.html 基本原理引入Key Distribution: KServer-Client从 ...
- [BUUCTF]PWN12——[BJDCTF 2nd]r2t3
[BUUCTF]PWN12--[BJDCTF 2nd]r2t3 题目网址:https://buuoj.cn/challenges#[BJDCTF%202nd]r2t3 步骤: 例行检查,32位,开启了 ...
- .NET Core工程应用系列(2) 实现可配置Attribute的Json序列化方案
背景 在这篇文章中,我们实现了基于自定义Attribute的审计日志数据对象属性过滤,但是在实际项目的应用中遇到了一点麻烦.需要进行审计的对象属性中会包含其他类对象,而我们之前的实现是没办法处理这种类 ...
- MySQL 分区表,为什么分区键必须是主键的一部分?
随着业务的不断发展,数据库中的数据会越来越多,相应地,单表的数据量也会越到越大,大到一个临界值,单表的查询性能就会下降. 这个临界值,并不能一概而论,它与硬件能力.具体业务有关. 虽然在很多 MySQ ...
- CF420A Start Up 题解
Content 给定一个长度为 \(n\) 的字符串,求这个字符串整个反转过来后是否和原字符串一样. 数据范围:\(1\leqslant n\leqslant 10^5\). Solution 众所周 ...
- JavaScript数组的push()等方法的使用
数组是值得有序集合.每个值在数组中有一个位置,用数字表示,叫做索引.JavaScript数组是无类型的:数组元素可以是任何类型,而且同一个数组中可以存在不同类型元素,甚至可以是对象或是其他数组,这就可 ...
- MyBatis学习(三)MyBatis基于动态代理方式的增删改查
1.前言 上一期讲到MyBatis-Statement版本的增删改查.可以发现.这种代码写下来冗余的地方特别多.写一套没啥.如果涉及到多表多查询的时候就容易出现问题.故.官方推荐了一种方法.即MyBa ...
- 【LeetCode】286. Walls and Gates 解题报告 (C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 BFS 日期 题目地址:https://leetcod ...
- 1434 区间LCM
1434 区间LCM 基准时间限制:1 秒 空间限制:131072 KB 一个整数序列S的LCM(最小公倍数)是指最小的正整数X使得它是序列S中所有元素的倍数,那么LCM(S)=X. 例如,LCM(2 ...
- 教学日志:javaSE-初识java
一.编译执行第一个java程序 /* 总结: 1.编译执行第一个java程序 步骤如下: 1.安装JDK开发环境: 2.配置环境变量,JAVA_HOME,PATH;--验证环境变量配置是否成功 jav ...