vue中实现点击空白区域关闭弹窗的两种方法
更新时间：2020年12月30日 11:42:55 作者：rong
这篇文章主要介绍了vue中实现点击空白区域关闭弹窗的两种方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
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更改调试地址端口号的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
写一些纯前端的项目时,自己造数据有些麻烦,于是我们可以利用mock造一些简单的数据,来满足我们的需求,本文主要介绍了Vite+Vue3使用MockJS的实现示例,感兴趣的可以了解一下2024-01-01
Vue Element-UI中el-table实现单选的示例代码
在element-ui中是为我们准备好了可直接使用的单选与多选属性的,本文主要介绍了Vue Element-UI中el-table实现单选的示例代码,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
Vue3全局属性app.config.globalProperties的实现
Vue3中的app.config.globalProperties是一个强大的全局配置功能,允许我们在应用级别设置和访问属性,本文主要介绍了Vue3全局属性app.config.globalProperties的实现,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
本篇文章主要介绍了vue之数据交互实例代码，vue中也存在像ajax和jsonp的数据交互，实现向服务器获取数据，有兴趣的可以了解一下2017-06-06
在本篇文章里小编给大家整理的是一篇关于Vue中的常用指令及用法总结内容，对此有兴趣的朋友们可以跟着学习下。2022-01-01
这篇文章主要给大家介绍了关于Vue页面渲染中key的应用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
经常遇到这样的需求，移动端中的导航并不是在顶部也不是在底部，而是在最底部且是固定的，当我们点击该导航项时会切换到对应的组件。这篇文章主要介绍了移动端底部导航固定配合vue-router实现组件切换功能,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了vue中的正则表达式校验、验证方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
vue使用el-upload上传文件及Feign服务间传递文件的方法
这篇文章主要介绍了vue使用el-upload上传文件及Feign服务间传递文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
最新评论