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

rainbow☉_☉

已于 2023-01-05 16:15:43 修改

阅读量460

点赞数

分类专栏：前端文章标签：前端 javascript vue.js

于 2023-01-05 16:13:14 首次发布

本文链接：https://blog.csdn.net/qq_51741730/article/details/128565108

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue.js应用中实现点击输入框或空白区域时自动收缩下拉框的功能。关键在于添加全局点击事件监听器，并通过判断点击目标是否在下拉框内来控制显示状态。代码示例中展示了模板和JavaScript部分的实现细节，包括使用`ref`和`v-if`进行条件渲染。

摘要由CSDN通过智能技术生成

点击空白部分收缩下拉框

展开下拉框后效果如下：
在这里插入图片描述
需求：再次点击输入框或者空白部分，下拉框自动收缩
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>