La boîte de sélection déroulante personnalisée frontale marchant sur la fosse - cliquez sur la partie vide pour rétrécir la boîte déroulante

Cliquez sur la pièce vierge pour réduire la liste déroulante

L'effet après l'expansion de la zone de liste déroulante est le suivant :

Condition requise : Cliquez à nouveau sur la zone de saisie ou sur la partie vide, et la zone de liste déroulante réduira automatiquement
le code du modèle comme suit :

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

Le code js est le suivant :

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