点击空白区域弹窗消失

2022-06-21  本文已影响0人  xsmile21

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

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

2、在全局创建一个点击事件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;
      }
    }
  }
}
上一篇 下一篇

猜你喜欢

热点阅读