フロントエンドのカスタム ドロップダウン選択ボックスがピットを踏んでいます - 空白部分をクリックしてドロップダウン ボックスを縮小します

空白部分をクリックしてドロップダウン ボックスを縮小します。

ドロップダウン ボックスを展開した後の効果は次のとおりです。

要件: 入力ボックスまたは空白部分をもう一度クリックすると、ドロップダウン ボックスは
次のようにテンプレート コードを自動的に縮小します。

// 我就简略大概写需要的东西，需要的内容自己添加
<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>