vue中实现点击空白区域关闭弹窗的两种方法


Posted in Vue.js onDecember 30, 2020

1. 第一种做法

首页在外层容器里面取一个名字为main,即ref="main",当bankSwitch为true的时候,弹窗出现

<div class="selectedBorder" ref="main">
	<div class="bankItem" v-if="bankSwitch == true">
		你好我是弹窗里面的内容部分
 	</div>
</div>

所触发的事件如下:

首页,先在全局创建一个点击事件:bodyCloseMenus

事件作用:当点击main容器的时候(this.refs.main && !this.refs.main.contains(e.target)),并且弹窗出现的时候(self.bankSwitch == true),点击空白区域将弹窗关闭(self.bankSwitch = false)

最后,在页面注销前,将点击事件给移除

mounted() {
  document.addEventListener("click", this.bodyCloseMenus);
 },
 methods:{
 bodyCloseMenus(e) {
   let self = this;
   if (this.$refs.main && !this.$refs.main.contains(e.target)) {
    if (self.bankSwitch == true){
     self.bankSwitch = false;
    }
   }
  },
beforeDestroy() {
  document.removeEventListener("click", this.bodyCloseMenus);
 },

2.第二种做法

首页在外层容器里面定义一个阻止冒泡事件,即@click.stop,当bankSwitch为true的时候,弹窗出现

<div class="selectedBorder" @click.stop>
	<div class="bankItem" v-if="bankSwitch == true">
		你好我是弹窗里面的内容部分
 	</div>
</div>

所触发的事件如下:

首页,先在全局创建一个点击事件:bodyCloseMenus

事件作用:当弹窗出现的时候(self.bankSwitch == true),点击空白区域将弹窗关闭(self.bankSwitch = false)

最后,在页面注销前,将点击事件给移除

mounted() {
  document.addEventListener("click", this.bodyCloseMenus);
 },
 methods:{
 bodyCloseMenus(e) {
   let self = this;
    if (self.bankSwitch == true){
     self.bankSwitch = false;
    }
  },
beforeDestroy() {
  document.removeEventListener("click", this.bodyCloseMenus);
 },

以上就是vue中实现点击空白区域关闭弹窗的两种方法的详细内容,更多关于vue 点击空白区域关闭弹窗的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vuex的数据渲染与修改浅析
Nov 26 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
vue实现简易音乐播放器
Aug 14 Vue.js
梳理一下vue中的生命周期
Dec 30 #Vue.js
Vue实现简易购物车页面
Dec 30 #Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 #Vue.js
vue+element UI实现树形表格
Dec 29 #Vue.js
vue实现树状表格效果
Dec 29 #Vue.js
vue实现图书管理系统
Dec 29 #Vue.js
Vue实现随机验证码功能
Dec 29 #Vue.js
You might like
php中文本操作的类
2007/03/17 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
php中switch语句用法详解
2015/08/17 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
解决pandas 作图无法显示中文的问题
2018/05/24 Python
详解python while 函数及while和for的区别
2018/09/07 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
python如何安装下载后的模块
2020/07/03 Python
台湾良兴购物网:EcLife
2019/12/01 全球购物
历史系自荐信范文
2013/12/24 职场文书
劳动实践课感言
2014/02/01 职场文书
水利学院求职自荐书
2014/02/01 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
小学语文业务学习材料
2014/06/02 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
房产公证书格式
2015/01/26 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
Python3.10的一些新特性原理分析
2021/09/15 Python