vue点击目标区域之外隐藏/关闭目标区域

如图为自己写的下拉框, 点击头部可实现控制下拉框盒子的显示与隐藏, 但是点击除了头部与下拉框以外的区域, 也需要关闭下拉框盒子, 实现方式如下：

html代码：（stop修饰符是用来阻止事件冒泡）

<template>
    <div class="root">
       <div class="dropdownMenu">
         <div class="top" @click.stop="showDropdown=!showDropdown"></div>
         <div class="box" v-show="showDropdown"></div>
       </div>
    </div>
</template>

• 方法一：在dom挂载完成后添加事件，点击非目标区域执行代码关闭下拉框盒子

mounted(){
  // 模拟外部点击
  document.addEventListener('click', (e) => {
    if (e.target.className !== 'dropdownMenu') {
      this.showDropdown = false
    }
  })
},
// 在组件生命周期结束时销毁
beforeDestroy() {
   window.removeEventListener('click', () => {}, true)
}

• 方法二：监听showDropdown，下拉框显示时对body绑定点击事件，点击便隐藏盒子

  watch: {
    showDropdown (val) {
      if (val) {
        document.body.addEventListener('click', () => {
          this.showDropdown = false
        })
      } else {
        document.body.removeEventListener('click', () => {})
      }
    }
  }

参考自：https://blog.youkuaiyun.com/longgege001/article/details/88704447