vue点击空白区域隐藏指定div,vue关闭窗口方法
本文主要介绍了在vue中点击空白区域关闭弹出窗口的两种方法，帮助你更好的理解和使用vue框架。感兴趣的朋友可以了解一下。
1. 第一种做法
在主页的外部容器中，取一个名称main，即ref=main 。当bankSwitch为真时，会出现一个弹出窗口。
div class= selected border ref= main
v-if=bankSwitch==true
你好，我是弹窗的内容部分。
/div
/div
触发的事件如下：
在主页上，首先全局创建一个单击事件：bodyCloseMenus
事件：当主容器被点击时(this.refs.main！this . refs . main . contains(e . target))，当弹出窗口出现时(self.bankSwitch==true)，点击空白区域关闭弹出窗口(self.bankSwitch=false)
最后，在页面注销之前，click事件将被删除。
已安装(){
document . addevent listener( click ，this . bodyclosemenus)；
},
方法：{
bodyCloseMenus(e) {
让自我=这个；
如果(这个。$refs.main！这个。$ refs . main . contains(e . target)){
if (self.bankSwitch==true){
self.bankSwitch=false
}
}
},
销毁前(){
document . removeeventlistener( click ，this . bodyclosemenus)；
},
2.第二种做法
在主页的外层容器中定义一个防泡事件，即@click.stop。当bankSwitch为真时，会出现一个弹出窗口。
div class= selected border @ click . stop
v-if=bankSwitch==true
你好，我是弹窗的内容部分。
/div
/div
触发的事件如下：
在主页上，首先全局创建一个点击事件：bodyCloseMenus
事件：弹出窗口出现时(self.bankSwitch==true)，点击空白区域关闭弹出窗口(self.bankSwitch=false)。
最后，在页面注销之前，click事件将被删除。
已安装(){
document . addevent listener( click ，this . bodyclosemenus)；
},
方法：{
bodyCloseMenus(e) {
让自我=这个；
if (self.bankSwitch==true){
self.bankSwitch=false
}
},
销毁前(){
document . removeeventlistener( click ，this . bodyclosemenus)；
},
这就是在vue中点击空白区域关闭弹出窗口的两种方法的细节。关于在vue中点击空白区域关闭弹出窗口的更多信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。