如何点击页面任意区域关闭Vue下拉列表？附现有代码

嘿，针对你这个点击页面任意区域关闭下拉列表的需求，我给你几个实用的方案，结合你的Vue代码来调整：

这是最常用的原生实现方式，逻辑清晰且容易维护：

1. 先修正你的closeForm方法：
   你当前把addedForm设为false，但初始值是0，类型不匹配，改成和初始值一致的数字：

closeForm() {
  this.addedForm = 0;
}

2. 给下拉容器添加ref（提升判断精准度）：
   给两个.select容器加上ref标识，方便后续判断点击是否在下拉区域内：

<div class="select" ref="selectContainer1">
  <div class="select-header form-control" v-on:click="AddForm(1)">
    <span class="select__current">Please select one option</span>
  </div>
  <addForm v-if="addedForm === 1" />
</div>

<div class="select" ref="selectContainer2">
  <div class="select-header form-control" v-on:click="AddForm(2)">
    <span class="select__current">Please select one option</span>
  </div>
  <addForm v-if="addedForm === 2" />
</div>

3. 添加全局点击监听与销毁逻辑：
   在组件生命周期中绑定全局点击事件，避免内存泄漏：

export default {
  name: 'Index',
  data() {
    return {
      addedForm: 0,
    }
  },
  mounted() {
    // 组件挂载后监听文档点击
    document.addEventListener('click', this.handleOutsideClick);
  },
  beforeDestroy() {
    // 组件销毁前移除监听，防止内存泄漏
    document.removeEventListener('click', this.handleOutsideClick);
  },
  methods: {
    AddForm(number) {
      this.addedForm = number;
    },
    closeForm() {
      this.addedForm = 0;
    },
    handleOutsideClick(e) {
      // 判断点击是否在两个下拉容器之外
      const isInFirstSelect = this.$refs.selectContainer1?.contains(e.target);
      const isInSecondSelect = this.$refs.selectContainer2?.contains(e.target);
      if (!isInFirstSelect && !isInSecondSelect) {
        this.closeForm();
      }
    }
  },
  components: {
    addForm,
  }
}

这样设置后，只有点击两个下拉容器之外的区域，才会触发下拉关闭。

如果不想用ref，也可以通过阻止事件冒泡来快速实现：

1. 修改AddForm方法，阻止事件冒泡：
   给点击事件传递$event参数，并阻止它冒泡到文档层面：

<div class="select-header form-control" v-on:click="AddForm(1, $event)">
  <span class="select__current">Please select one option</span>
</div>
<div class="select-header form-control" v-on:click="AddForm(2, $event)">
  <span class="select__current">Please select one option</span>
</div>

AddForm(number, e) {
  e.stopPropagation(); // 阻止事件冒泡到document
  this.addedForm = number;
}

2. 绑定全局点击事件：
   直接在文档点击时触发关闭方法：

mounted() {
  document.addEventListener('click', this.closeForm);
},
beforeDestroy() {
  document.removeEventListener('click', this.closeForm);
},

这个逻辑很简单：点击下拉头部时，事件不会冒泡到document，所以不会关闭；点击页面其他区域时，document的点击事件触发closeForm，直接关闭下拉。

如果你有多个类似的下拉组件，封装一个自定义指令会更高效：

1. 在组件内注册自定义指令：

export default {
  // ... 其他内容
  directives: {
    clickOutside: {
      bind(el, binding) {
        // 定义点击处理函数
        function handleClickOutside(e) {
          if (!el.contains(e.target)) {
            binding.value(); // 触发绑定的关闭方法
          }
        }
        el.__vueClickOutside__ = handleClickOutside;
        document.addEventListener('click', handleClickOutside);
      },
      unbind(el) {
        // 解绑时移除监听
        document.removeEventListener('click', el.__vueClickOutside__);
        delete el.__vueClickOutside__;
      }
    }
  },
  // ... 其他内容
}

2. 在下拉容器上使用指令：
   给需要监听的容器绑定指令，指定关闭方法：

<div class="select" v-click-outside="closeForm">
  <!-- 下拉内容 -->
</div>
<div class="select" v-click-outside="closeForm">
  <!-- 下拉内容 -->
</div>

以后其他下拉组件也可以直接复用这个指令，非常方便。

内容的提问来源于stack exchange，提问作者Артём Столяр