本文详解 vue3 + typescript 下可编程控制的 dropdown 组件，支持 hover/点击/右键触发、受控/非受控模式、动态菜单配置与插槽定制，并重点说明如何实现「级联下拉自动展开」逻辑（如选中一级菜单后自动打开二级菜单），兼顾原生语义与交互体验。
本文详解 vue3 + typescript 下可编程控制的 dropdown 组件，支持 hover/点击/右键触发、受控/非受控模式、动态菜单配置与插槽定制，并重点说明如何实现「级联下拉自动展开」逻辑（如选中一级菜单后自动打开二级菜单），兼顾原生语义与交互体验。
在构建多级级联表单（如产品分类选择器）时，用户常期望“选完上一级，下一级下拉框自动展开”，以提升操作效率。但需明确：原生 <select></select> 元素不支持通过 JavaScript 主动触发下拉展开（select.showPicker() 仅部分 Chromium 浏览器支持且非标准）；因此，真正可靠的自动展开能力必须依赖自定义下拉组件——而非原生 <select></select>。
Vue3 生态中，推荐采用基于 Teleport + v-model:open 的受控式 Dropdown 组件（如 Ant Design Vue 4.x、Element Plus 或自研方案）。其核心在于将“展开状态”显式暴露为响应式 prop，并提供 open() / close() 方法供外部调用。
✅ 实现级联自动展开的关键步骤
假设你有三级下拉：type → action → make，目标是：
- 用户选择
type后，action下拉自动展开； - 用户选择
action后，make下拉自动展开。
1. 使用受控模式绑定 v-model:open
<template>
<Dropdown v-model:open="actionOpen" :menus="actionMenus" @select="onActionSelect">
<button class="trigger-btn">Action: {{ actionLabel || 'Select' }}</button>
</Dropdown>
<Dropdown v-model:open="makeOpen" :menus="makeMenus" @select="onMakeSelect">
<button class="trigger-btn">Make: {{ makeLabel || 'Select' }}</button>
</Dropdown>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import Dropdown from './components/Dropdown.vue'
const actionOpen = ref(false)
const makeOpen = ref(false)
const actionMenus = ref<MenuOption[]>([])
const makeMenus = ref<MenuOption[]>([])
// 当 type 改变时，重置并自动展开 action
watch(() => props.type, (newType) => {
if (newType) {
actionMenus.value = getActionOptions(newType)
actionOpen.value = true // ? 关键：主动设为 true 触发展开
}
})
// 当 action 选中后，自动展开 make
const onActionSelect = (item: MenuOption) => {
actionLabel.value = item.label
makeMenus.value = getMakeOptions(props.type, item.value)
makeOpen.value = true // ? 自动展开下一级
}
</script>2. 确保组件支持 v-model:open 与 open() 方法
你的 Dropdown 组件需导出 open() 方法（内部调用 open.value = true），便于在复杂场景手动触发：
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
// Dropdown.vue
const open = defineModel<boolean>('open', { default: false })
const triggerRef = ref<HTMLElement | null>(null)
const openDropdown = () => {
open.value = true
// 可选：聚焦到第一个菜单项，提升可访问性
nextTick(() => {
const firstItem = document.querySelector('.dropdown-menu .menu-item')
firstItem?.focus()
})
}
defineExpose({ open: openDropdown })3. 替代方案：使用 Select2 或 Choices.js（仅限非 Vue3 项目）
若受限于技术栈无法升级至 Vue3 自定义组件，可引入 Select2（jQuery 依赖）或 Choices.js（无依赖）：
<!-- 引入 Choices.js -->
<link rel="stylesheet" href="choices.css">
<script src="choices.min.js"></script>
<select id="action-select"></select>
<script>
const choices = new Choices('#action-select', {
searchEnabled: false,
shouldSort: false
})
// 选中 type 后，手动触发展开
document.getElementById('type').addEventListener('change', () => {
choices.setChoices(getActionOptions(), 'value', 'label', false)
choices.showDropdown() // ✅ 标准 API，可靠生效
})
</script>⚠️ 注意事项
- 禁用原生
<select></select>的自动展开是浏览器安全策略决定的，不可绕过；任何“模拟点击”或dispatchEvent均无效。- Vue3 自定义 Dropdown 必须使用
Teleport渲染弹层至body，避免父容器overflow: hidden截断菜单。- 若需键盘导航（Tab/Arrow Keys），务必实现
role="listbox"、aria-expanded、aria-activedescendant等 WAI-ARIA 属性。- 对于
datalist场景（如你的makeInput），它本质是输入建议，不支持自动展开；应统一替换为自定义下拉组件以获得完整控制权。
综上，实现级联下拉自动展开的本质，是放弃对原生 <select></select> 的依赖，转向语义化更强、控制力更完整的自定义组件方案。Vue3 的响应式模型与组合式 API 为此提供了简洁、可维护、无障碍友好的实现路径。
