[JavaScript知识库]vue：实现点击空白区域关闭弹窗

①给外层容器设置一个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>

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
    }
  }
}