前端自定义下拉选择框踩坑——点击空白部分收缩下拉框

点击空白部分收缩下拉框

展开下拉框后效果如下：

需求：再次点击输入框或者空白部分，下拉框自动收缩
template代码如下：

// 我就简略大概写需要的东西，需要的内容自己添加
<template>
  <div ref="selectTableRef">
    <el-input v-model="value"/>
    <div v-if="isShowTable">
		我是下拉框
	</div>
  </div>
</template>

js代码如下：

<script>
  data() {
    
    
  	return {
    
    
  	  value: '',
  	  isShowTable: false,
  	};
  },
  mounted() {
    
    
    // 挂载全局监听， 用document或window都行，但要跟removeEventListener一样， 注意closePanel不可以带参数
    document.addEventListener("click", this.closePanel);
  },
  beforeDestroy() {
    
    
    // 页面销毁前记得移除监听，注意closePanel不可以带参数，跟addEventListener的方法是一样的
    document.removeEventListener("click", this.closePanel);
  },
  methods: {
    
    
  closePanel(e) {
    
    
  	  // 注意: 要在需要下拉框和输入框的父元素添加 ref="selectTableRef"
      const selectTableRef = this.$refs.selectTableRef;
      // selectTableRef里是否包含点击的元素，不包含点击的元素就隐藏面板
      if (!selectTableRef.contains(e.target)) {
    
    
        this.isShowTable = false;
      }
    },
  }
</script>