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>