当前位置:  首页  >  PHP资讯  >  业界资讯

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

这篇文章主要介绍了vue中实现点击空白区域关闭弹窗的两种方法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下

1. 第一种做法

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

 
你好我是弹窗里面的内容部分

所触发的事件如下:

首页,先在全局创建一个点击事件: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的时候,弹窗出现

 
你好我是弹窗里面的内容部分

所触发的事件如下:

首页,先在全局创建一个点击事件: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 点击空白区域关闭弹窗的资料请关注其它相关文章!

内容推荐:免费高清PNG素材下载
吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4