vue实现点击空白隐藏弹窗

最新推荐文章于 2023-07-08 20:44:52 发布

转载最新推荐文章于 2023-07-08 20:44:52 发布 · 1.6k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/qq_37899622/article/details/120210044

收录于

当前文章被收录于：

111 篇文章 1 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

文章介绍了在Vue.js应用中管理弹窗的一种常见场景，即通过ref属性和全局点击事件监听来关闭弹窗，以及使用@click.stop防止事件冒泡的另一种方式。两种方法都在组件挂载和销毁时适当地添加和移除事件监听器，确保内存泄漏的避免。

第一种方式

给外层容器设置一个ref属性为main，当bankSwitch为true时，弹窗出现

<div class="selectedBorder" ref="main">
  <div class="bankItem" v-if="bankSwitch === true">
    show dialog!!!
  </div>
</div>

在全局创建一个点击事件bodyCloseMenus，当点击容器main，并且弹窗出现时，点击空白区域将弹窗关闭。别忘了在页面注销前，将点击事件移除

mounted () {
  document.addEventListener('click', this.bodyCloseMenus)
},
beforeDestroy () {
  document.removeEventListener('click', this.bodyCloseMenus)
},
methods:{
  bodyCloseMenus (e) {
    const self = this
    if (this.$refs.main && !this.$refs.main.contains(e.target)) {
      if (self.bankSwitch === true){
        self.bankSwitch = false
      }
    }
  }
}

第二种方式

也可以给外层容器定义一个阻止冒泡事件：

<div class="selectedBorder" @click.stop>
  <div class="bankItem" v-if="bankSwitch === true">
    show dialog!!!
  </div>
</div>

js代码

mounted () {
  document.addEventListener('click', this.bodyCloseMenus)
},
beforeDestroy () {
  document.removeEventListener('click', this.bodyCloseMenus)
},
methods:{
  bodyCloseMenus (e) {
    const self = this
    if (self.bankSwitch === true){
      self.bankSwitch = false
    }
  }
}