Vue3 自定义下拉单选框：点击 input 弹出面板到搜索过滤的路

如果你做过管理后台，一定遇到过这种需求：一个下拉选择框，交互偏偏要求是“点击 input 才弹出面板，弹出来之后还能继续输入过滤”。最近我在重写一个表单系统时就连续接到几个类似需求，刚开始图省事直接用原生 select，结果在验收环节被硬生生怼了回来。今天我把这套“Vue3 中点击 input 显示下拉列表单选框”的完整实现思路拆开讲清楚，从最简单的显隐控制到数据流、事件坑位、键盘操作，再到带搜索过滤的进阶版本，一次性写完。

1. 为什么我最终还是把原生 select 换成了自定义下拉组件

先说结论：不是所有下拉场景都要自定义，但“点击 input 显示下拉列表”这个交互，原生 select 确实很难做到位。

我参与的内部信息录入系统，表单字段特别多，几乎每天都要跟下拉框打交道。需求方提的交互描述很简短：“用户点一下输入框，从下面弹出的列表里单选一个值。”原型图里画的就是一个普通的 input，点击后展开一组选项，可以高亮、滚动、选中、自动关闭。

一开始我觉得原生 select 就够了，顶多调调边框颜色。真正动手才发现三个问题绕不过去。

1.1 原生下拉框的三个硬伤

第一个是样式不可控。select 和 option 在不同浏览器里的渲染差异非常大。你要是想在选项里放一个小图标、加一个选中对勾、调整字体间距，Chrome 和 Firefox 的表现完全不一样，更别提还有一些嵌入式项目里内置的浏览器内核，option 的样式几乎改不动。

第二个是交互受限。产品要求的语义是“点击 input 弹出面板”，同时希望在弹出后 input 仍可输入过滤。原生 select 虽然点击也能弹开，但它弹开的是系统级列表，input 的输入行为会完全失效。想做成“输入即过滤”的远程搜索下拉，原生能力是零。

第三个是视觉一致性。给 select 设置 padding 在部分内核里无效，下拉箭头的替换很麻烦，即使在样式上勉强统一了，focus 状态、hover 状态也很难做到和项目里的其他控件保持一致。

1.2 自定义组件的交互边界在哪里

在动手之前，我先把这些交互边界列清楚，后面编码才不容易漏：

• 鼠标点击 input 时，下拉面板显示；再次点击 input 时，面板切换显隐。
• 鼠标点击面板外任意区域，面板关闭。
• 鼠标点击某个选项，选中该值，input 回显对应文案，面板关闭。
• 支持键盘：ArrowDown 和 ArrowUp 移动高亮，Enter 确认选中，Escape 关闭面板。
• 组件对外通过 v-model 双向绑定真实值。
• 选项数据由父级传入，组件自己不维护选项源。

这套需求定义下来，原生 select 确实没法覆盖。而且项目已经在用 Vue3，组合式 API 封装这种组件成本很低。与其每个页面各写一套“点击显示、外部关闭”的零散逻辑，不如抽成公共组件。这也是我会完整实现一遍它的主要原因。

2. 点击 input 弹出面板：显隐控制与外层点击关闭

2.1 面板状态与基础结构

整个组件最核心的状态只有一个：panelVisible。它决定下拉面板在不在。

基础模板结构是这样的：

<template> <div class="select-wrapper" ref="wrapperRef"> <input type="text" readonly :placeholder="placeholder" :value="displayText" @click="togglePanel" /> <transition name="drop"> <ul class="select-panel" v-show="panelVisible"> <li v-for="item in options" :key="item.value" :class="{ 'is-active': item.value === modelValue }" @click="handleSelect(item)" > {{ item.label }} </li> </ul> </transition> </div> </template>

这里有几个细节要说明：

• input上加readonly，是为了让基础版保持“只能点击选择，不能手动输入”的语义。光标点进去不会弹出系统键盘，也不会让用户随意改文本。这个属性到了后面可搜索版本会去掉。
• 面板用v-show而不是v-if。如果选项不多两者差不多，但v-show会把display: none直接挂在ul上，频繁开关时不会反复销毁重建 DOM，实测在几百个选项的场景下更稳。
• transition配合一个简单的淡入下移动画，视觉上会比干巴巴的出现舒服很多。

显隐切换的逻辑：

const togglePanel = () => { panelVisible.value = !panelVisible.value }

就这么简单。真正麻烦的是“点击外部关闭”那部分。

2.2 document 级点击监听与 contains 判断

点击外部关闭下拉，最常见的做法是在onMounted里给document挂一个click监听，在回调里判断点击目标是否落在组件根节点内部：

const wrapperRef = ref(null) const panelVisible = ref(false) const handleOuterClick = (e) => { if (!wrapperRef.value) return if (!wrapperRef.value.contains(e.target)) { panelVisible.value = false } } onMounted(() => { document.addEventListener('click', handleOuterClick) }) onUnmounted(() => { document.removeEventListener('click', handleOuterClick) })

关键就一行：contains(e.target)。它能准确判断点击点是不是组件内部的元素，包括 input、面板里的每一项、滚动条等。不在组件内部，就强制关闭面板。

这里要特别注意两个问题：

监听一定要挂在document上，不要挂在window上。我见过有人写window.addEventListener('click', ...)，大多数情况下也能用，但某些文档流场景下两者捕获顺序和事件冒泡层级会有差异，用document最稳妥。

卸载时一定要移除监听。如果你的组件在弹窗里使用，弹窗关闭时组件可能被销毁，监听不清理会导致后续每次点击都执行一次无意义的判断，严重时还会因闭包引用产生内存压力。

2.3 为什么不用 input 的 blur 事件来关闭

很多第一次写这类需求的人会尝试用@blur关闭面板，思路是“输入框失去焦点就收起列表”。这个思路在纯桌面端看着没问题，但实际落地时会踩一个非常隐蔽的坑：

点击下拉面板中的选项时，事件触发顺序是：

1. mousedown先触发。
2. input 失去焦点，blur事件触发，面板此时就被关掉了。
3. mouseup触发。
4. click触发。

也就是说，当click到达选项 li 的时候，面板已经因为blur被关了。你原本想在handleSelect里处理选中逻辑，结果 li 都被销毁了，click事件根本不会触发。表现就是：用户点了选项，列表消失，值却没选中。

这也是我在实际项目中踩过最典型的坑之一。解决的策略很明确：不要用blur做关闭，统一用document级click来做外部关闭判断。这样点击选项时，事件源仍在组件内部，contains判断为 true，面板不会被关闭，handleSelect可以正常执行。

3. 单选数据流：v-model 背后的绑定链路

3.1 界面显示 label，业务保存 value

下拉单选组件最容易被新手搞错的地方，是“显示值”和“真实值”的区分。

业务后端通常只认value，比如省份编码110000、状态码1、用户 id9527。但界面上要展示给用户看的，是label，比如“北京市”“已启用”“张三”。在组件内部，input 显示的是label，但对外绑定的 v-model 值应该是value。

所以组件里会有一个displayText的计算属性：

const props = defineProps({ modelValue: { type: [String, Number], default: '' }, options: { type: Array, default: () => [] }, placeholder: { type: String, default: '请选择' } }) const displayText = computed(() => { const matched = props.options.find(item => item.value === props.modelValue) return matched ? matched.label : '' })

displayText做的事情很简单：从options里找到value === modelValue的那一项，返回它的label。

这里还有一个容易忽略的边界情况：如果 modelValue 在选项里找不到对应项怎么办？比如后端返回给回显接口的 value 因为数据变更失效了。此时displayText返回空字符串，input 会表现得像没选中一样。从产品角度看这个交互其实是合理的，因为旧数据确实没有合法显示项了。如果你希望在表单里提示用户“数据已失效，请重新选择”，可以额外加一个invalid计算属性，在表单校验时做高亮。

3.2 emit 更新与 edge case

选中项的处理逻辑：

const emit = defineEmits(['update:modelValue']) const handleSelect = (item) => { emit('update:modelValue', item.value) panelVisible.value = false }

Vue3 的v-model本质是:model-value加上@update:model-value的语法糖。组件内部不能直接改 prop，必须通过emit('update:modelValue', 新值)向上通知父组件更新，父组件绑定的数据一变，再通过 props 传回来，完成闭环。

这个链路看起来绕，但它是 Vue3 单向数据流规范的核心，也是用defineModel宏出现之前的标准写法。如果你用的是 Vue 3.4 以上版本，可以直接写const model = defineModel()，本质是一样的，只是省掉了手动emit。基础学习阶段我建议还是把原生写法走一遍，理解数据流之后再换宏不迟。

几个 edge case 也要处理到位：

• 重复点击当前已选中的项：不需要防抖，直接关闭面板即可，因为值没有变化，父组件不会收到更新，form 校验的 touched 状态不会被误触发。
• 传入options为空数组：面板打开后应该展示“暂无可选项”之类的空状态，而不是渲染一个空列表。
• 选项 value 为 0 或空字符串：判断选中状态时不要用if (item.value)这种真值判断，要严格用===比较。

4. 落地过程中绕不开的四个坑

4.1 事件冒泡导致的面板闪开闪合

如果 input 的@click="togglePanel"和 document 的click监听同时存在，会不会出现“刚打开就被关闭”的情况？

答案是：如果contains判断写错了，一定会出现。比如把handleOuterClick写成：

if (e.target !== wrapperRef.value) { panelVisible.value = false }

那点击 input 时事件冒泡到 document，因为e.target是 input 而不是整个 wrapper，面板就会被误关。紧接着togglePanel又因为同一个 click 把它打开，视觉上就是一闪而过。实际调试时你甚至看不出是冒泡问题，只会觉得面板“不稳定”。

解决办法就是我前面说的，统一用contains判断，只要点击点落在组件根节点内部，包括 input、面板、li 等，都视为“内部点击”，不执行关闭。这是最稳妥的方案。

4.2 面板定位：absolute 比 fixed 更省心

下拉面板的定位方式，直接影响你在哪些容器里敢用它。

最省心的方案是组件根节点设置position: relative，面板用position: absolute：

.select-wrapper { position: relative; display: inline-block; } .select-panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 999; max-height: 240px; overflow-y: auto; }

这样面板会跟随组件根部自然定位，不管外层是普通表单、弹窗还是页面滚动，只要组件本身不被overflow: hidden裁掉，面板位置基本不会错。

为什么不用fixed？如果页面里有滚动容器，或者整个页面发生滚动，fixed是相对于视口定位的，面板不会跟着输入框一起动，结果就是“输入框滚上去了，下拉列表还留在原地”，非常出戏。除非你的场景是类似顶部导航的浮层选择，否则默认都用absolute。

还有一个用户体验细节：面板和 input 之间间距通常控制在 2px 到 8px 之间，我一般用4px。间距太大会让用户觉得“点得不连贯”，太小又容易和边框糊在一起。

4.3 键盘导航与滚动跟随

很多自定义下拉组件都只做了鼠标交互，键盘操作被完全忽略。但对高频录入的表单场景来说，键盘支持能让操作效率提升一大截。

基本键盘逻辑有三个：

const handleKeydown = (e) => { if (!panelVisible.value && e.key === 'ArrowDown') { e.preventDefault() panelVisible.value = true } if (panelVisible.value) { switch (e.key) { case 'ArrowDown': e.preventDefault() moveActiveIndex(1) break case 'ArrowUp': e.preventDefault() moveActiveIndex(-1) break case 'Enter': e.preventDefault() confirmSelect() break case 'Escape': panelVisible.value = false break } } }

moveActiveIndex要处理循环边界：

const activeIndex = ref(-1) const moveActiveIndex = (step) => { const total = options.value.length if (total === 0) return activeIndex.value = (activeIndex.value + step + total) % total scrollActiveIntoView() }

边界处取模，让用户按 ArrowDown 到末尾时可以循环回第一个。这个细节仁者见仁，产品没有特殊要求时建议保留，因为用户按了 8 次下键停在最后一个是常有的事，循环回顶可以减少一次回翻操作。

scrollActiveIntoView的作用是让高亮项始终在可视区域内。因为面板固定最大高度 240px，选项多时内部滚动，如果高亮项在可视区外，用户只按键盘看不到当前聚焦到哪一档，体验会非常差。

const scrollActiveIntoView = () => { nextTick(() => { const panel = panelRef.value const activeItem = panel?.querySelector('.is-highlight') activeItem?.scrollIntoView({ block: 'nearest' }) }) }

scrollIntoView配合block: 'nearest'是这里最简洁的实现，浏览器会自动决定往哪个方向滚动最少量。

Enter 确认选中：

const confirmSelect = () => { if (activeIndex.value >= 0) { const wrapped = filteredOptions.value const target = wrapped[activeIndex.value] if (target) { emit('update:modelValue', target.value) } } panelVisible.value = false }

注意 Enter 确认后要把面板关上，这个很自然。Escape 只关闭面板，不改变当前值。

4.4 选项高亮与 hover 状态的管理

下拉列表里最好同时维护两种高亮状态：

• is-selected：当前已被选中项，通常用主题色勾选标记。
• is-highlight：键盘上下键移动到的临时聚焦项，通常用浅色背景。

这两种状态不要混用。如果你只用一个高亮类，会出现“键盘移动高亮后，分不清哪个是真正选中的”这种尴尬情况。

实际交互里还有个容易忽略的细节：鼠标 hover 事件会改变高亮位置吗？我建议hover 和键盘高亮互相覆盖——鼠标移上去时把activeIndex同步成当前项索引，键盘按下时忽略 hover 状态直接移动。这样保证用户无论用鼠标还是键盘，看到的“当前焦点”都是同一个。

const handleHover = (index) => { activeIndex.value = index hoverMode.value = true }

如果你不处理 hover 同步，用户先按了下键（高亮停在第二项），此时再用鼠标悬停到第五项，视觉上会出现“键盘高亮在第二项、鼠标悬停在第五项”两个背景同时存在，容易造成误选。

5. 基础版完整代码与业务调用示例

5.1 组件完整实现

把前面所有逻辑整合起来，一个基础版BaseSelect.vue大概是这样的：

<template> <div class="select-wrapper" ref="wrapperRef"> <input type="text" readonly :value="displayText" :placeholder="placeholder" @click="togglePanel" @keydown="handleKeydown" /> <transition name="drop"> <ul v-show="panelVisible" class="select-panel" ref="panelRef" > <li v-for="(item, index) in options" :key="item.value" :class="{ 'is-selected': item.value === modelValue, 'is-highlight': index === activeIndex }" @click="handleSelect(item)" @mouseenter="handleHover(index)" > <span class="select-option-label">{{ item.label }}</span> <span v-if="item.value === modelValue" class="select-option-check">✓</span> </li> <li v-if="options.length === 0" class="select-empty"> 暂无可选项 </li> </ul> </transition> </div> </template>

脚本部分：

<script setup> import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue' const props = defineProps({ modelValue: [String, Number], options: { type: Array, default: () => [] }, placeholder: { type: String, default: '请选择' } }) const emit = defineEmits(['update:modelValue']) const wrapperRef = ref(null) const panelRef = ref(null) const panelVisible = ref(false) const activeIndex = ref(-1) const displayText = computed(() => { const matched = props.options.find(item => item.value === props.modelValue) return matched ? matched.label : '' }) const togglePanel = () => { panelVisible.value = !panelVisible.value } const handleSelect = (item) => { emit('update:modelValue', item.value) activeIndex.value = props.options.findIndex(opt => opt.value === item.value) panelVisible.value = false } const handleHover = (index) => { activeIndex.value = index } const moveActiveIndex = (step) => { const total = props.options.length if (total === 0) return activeIndex.value = (activeIndex.value + step + total) % total nextTick(() => { const activeItem = panelRef.value?.querySelector('.is-highlight') activeItem?.scrollIntoView({ block: 'nearest' }) }) } const confirmSelect = () => { if (activeIndex.value >= 0) { const target = props.options[activeIndex.value] if (target) { emit('update:modelValue', target.value) } } panelVisible.value = false } const handleKeydown = (e) => { if (!panelVisible.value && e.key === 'ArrowDown') { e.preventDefault() activeIndex.value = 0 panelVisible.value = true return } if (!panelVisible.value) return switch (e.key) { case 'ArrowDown': e.preventDefault() moveActiveIndex(1) break case 'ArrowUp': e.preventDefault() moveActiveIndex(-1) break case 'Enter': e.preventDefault() confirmSelect() break case 'Escape': panelVisible.value = false break } } const handleOuterClick = (e) => { if (!wrapperRef.value) return if (!wrapperRef.value.contains(e.target)) { panelVisible.value = false } } onMounted(() => { document.addEventListener('click', handleOuterClick) }) onUnmounted(() => { document.removeEventListener('click', handleOuterClick) }) </script>

样式部分：

<style scoped> .select-wrapper { position: relative; display: inline-block; width: 240px; } .select-wrapper input { width: 100%; height: 36px; padding: 0 32px 0 12px; border: 1px solid #d9d9d9; border-radius: 6px; background: #fff; cursor: pointer; outline: none; box-sizing: border-box; } .select-wrapper input:focus { border-color: #409eff; } .select-panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 999; max-height: 240px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid #e4e7ed; border-radius: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); } .select-panel li { padding: 8px 12px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 14px; color: #303133; } .select-panel li:hover, .select-panel li.is-highlight { background: #f5f7fa; } .select-panel li.is-selected { color: #409eff; background: #ecf5ff; } .select-empty { justify-content: center; color: #909399; cursor: not-allowed; } .drop-enter-active, .drop-leave-active { transition: opacity 0.15s ease, transform 0.15s ease; } .drop-enter-from, .drop-leave-to { opacity: 0; transform: translateY(-6px); } .drop-enter-to, .drop-leave-from { opacity: 1; transform: translateY(0); } </style>

5.2 页面里的调用与示例

调用侧非常简单：

<template> <BaseSelect v-model="province" :options="provinceOptions" placeholder="请选择省份" /> </template> <script setup> import { ref } from 'vue' import BaseSelect from '@/components/BaseSelect.vue' const province = ref('110000') const provinceOptions = [ { label: '北京市', value: '110000' }, { label: '天津市', value: '120000' }, { label: '河北省', value: '130000' } ] </script>

页面里只需要维护province变量和选项数组。组件内部怎么展示、怎么关闭，全部隔离在组件内部。

5.3 几种典型设计稿的适配思路

实际项目里设计稿不会都长一个样，我总结几种常见变体：

• 带右侧箭头图标：input 右侧加一个绝对定位的箭头，箭头默认向下，面板打开时旋转 180 度。实现方式和点击事件完全无关，只是视觉反馈。
• 宽度跟随内容：如果希望面板和 input 同宽，只要保持面板left:0; right:0即可。如果希望面板比 input 略宽，可以在面板样式中加一个固定的width覆盖。
• 空状态文案定制：可以通过 prop 传入emptyText，默认“暂无可选项”。
• 禁用状态：加一个disabledprop，input上加disabled属性，同时禁止 toggle 和键盘操作。

这些变体都不需要改动数据流逻辑，只在模板和样式层叠加即可。

6. 从单选到可搜索：过滤式下拉的扩展方案

6.1 过滤逻辑与输入框语义切换

基础版做完之后，最常见的扩展需求是“能不能在 input 里输入文字，自动过滤选项”。

这就要把 input 从readonly改成可输入，同时增加一个keyword响应式变量：

<input type="text" v-model="keyword" :placeholder="placeholder" @focus="panelVisible = true" @click="panelVisible = true" @keydown="handleKeydown" />

过滤选项用计算属性：

const filteredOptions = computed(() => { const kw = keyword.value.trim().toLowerCase() if (!kw) return props.options return props.options.filter(item => item.label.toLowerCase().includes(kw) ) })

这里有几个体验层面的细节要处理好：

选中之后 keyword 要清空。否则用户选完一个值，输入框里还残留刚才输入的过滤词，下次打开下拉时看到的不是完整列表，而是被过滤后的结果。

选中后的回显不能只靠 keyword。因为 keynword 一旦清空，input 展示的就是空。正确做法是不要用 v-model 绑定 Raw 数据，而是用类似基础版的方式，通过displayText控制显示值。可以把 input 拆成“真实输入源”和“展示值”两个维度：用户输入时走keyword，选中后回写显示值。

一个比较简洁的实现是：

const inputValue = ref('') const handleSelect = (item) => { emit('update:modelValue', item.value) inputValue.value = item.label panelVisible.value = false keyword.value = '' } const handleInput = (e) => { inputValue.value = e.target.value keyword.value = e.target.value panelVisible.value = true }

inputValue负责只管输入框里的显示文本，keyword负责驱动过滤，选中后把inputValue设置成label，并清空keyword，等下次打开时过滤条件重置为全部。

6.2 异步加载、空态与防抖处理

可搜索版的下拉，通常还要面对一个场景：选项不是一次性全量给到前端的，而是根据输入关键字远程搜索。

这种情况下要把filteredOptions改为异步占位。常见做法是组件内部维护一份remoteOptions，父组件通过异步接口返回结果后通过 prop 传入，组件内部把过滤逻辑简化成：输入关键字触发emit('search', keyword)，父组件请求接口后更新 options。

防抖逻辑放在组件内部也可以，但更推荐放到调用方的查询函数里。比如：

const handleSearch = () => { debounce(() => { fetchOptions({ keyword: keyword.value }) }, 300) }

空态处理也要考虑两种：

• 基础模式下 options 为空：显示“暂无可选项”。
• 搜索模式下 filteredOptions 为空：显示“未找到匹配项”，并提示用户尝试更换关键词。

这两种文案可以放在同一块空态区域里，通过一个表示“是否处于搜索状态”的布尔值区分。

异步场景下还有一个隐藏问题：延迟返回的旧数据可能覆盖新结果。简单规避方式是在请求回调用给每次请求打一个自增 id，响应时只接受最新 id 的结果：

let requestSeq = 0 const fetchOptions = async () => { const seq = ++requestSeq const data = await api.fetchOptions(keyword) if (seq === requestSeq) { remoteOptions.value = data } }

这个技巧在选项异步场景里很实用，比用 AbortController 更轻量。

最后再提一个小建议：如果你把基础版组件吃透了，遇到带搜索、带分组、带远程加载的复杂下拉时，别急着自己从头再写一遍。可以先用这个可搜索版作为底座，再按需叠加分组标题、主题定制、虚拟滚动等能力。把这个组件的交互骨架想清楚，后面所有“点击 input 弹出列表”类的需求，你都会有一份足够打底的经验。