vue点击空白弹窗关闭的方法是什么?
Admin 2021-05-24 群英技术资讯 1058 次浏览
现在很多网站都会做弹窗,但是我们知道频繁的弹窗和关闭不了的弹窗都是不利于用户体验的。为了提高用户的弹窗体验,我们能够使用vue实现点击空白区域来关闭弹窗。那么这要如何实现呢?下面给大家分享两个方法。
首页在外层容器里面取一个名字为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); },
首页在外层容器里面定义一个阻止冒泡事件,即@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实现点击空白关闭弹窗的介绍啦,上述代码具有一定的参考价值,需要的朋友可以参考学习,希望对大家学习有帮助。
文本转载自脚本之家
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要介绍了学习 Vue.js 遇到的那些坑,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
这篇文章主要为大家详细介绍了javaScript日期工具类的汇总,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
mac安装node.js的方法:1、访问nodejs官网;2、下载对应的“.pkg”文件;3、双击“.pkg”文件并按照默认步骤安装即可。
这篇文章主要介绍了Vue混入使用和选项合并,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
用for循环语句或filter()方法循环历数组,在每个循环中将一个数组元素分别去除2到sqrt(元素本身)。如果可以去除,则表明该组元素并非质数,而是质数。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008