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 elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
详解vue 组件注册
Nov 20 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
Vue如何清空对象
Mar 03 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
vue使用element-ui按需引入
May 20 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与SQL注入攻击[三]
2007/04/17 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python实现把xml或xsl转换为html格式
2015/04/08 Python
python根据京东商品url获取产品价格
2015/08/09 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
python语音识别实践之百度语音API
2018/08/30 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
pyspark 随机森林的实现
2020/04/24 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
直接有效的自我评价
2014/01/11 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
淘宝活动策划方案
2014/02/06 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
中层干部培训方案
2014/06/16 职场文书
校园运动会广播稿
2014/10/06 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
python字典进行运算原理及实例分享
2021/08/02 Python