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 相关文章推荐
vue+iview分页组件的封装
Nov 17 Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
vue封装数字翻牌器
Apr 20 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
PDO::inTransaction讲解
2019/01/28 PHP
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
es6基础学习之解构赋值
2018/12/10 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Python中optparser库用法实例详解
2018/01/26 Python
Python中装饰器学习总结
2018/02/10 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
在keras中实现查看其训练loss值
2020/06/16 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
干部下基层实施方案
2014/03/14 职场文书
党务公开方案
2014/05/06 职场文书
入党介绍人评语
2014/05/06 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
师德师风事迹材料
2014/12/20 职场文书
给老婆的检讨书
2015/01/27 职场文书
大学生学期个人总结
2015/02/12 职场文书
2015年中秋寄语
2015/07/31 职场文书
Java8中接口的新特性使用指南
2021/11/01 Java/Android