useSelectComputed

useSelectComputed：通用下拉选择器交互 Hook

痛点来源

下拉选择器（Select、Dropdown 等）是交互频率极高的表单控件，但其核心交互逻辑在多个组件中高度重复：

• 需要管理下拉面板的显示/隐藏状态
• 处理焦点状态（focused）以支持样式变化与键盘交互
• 实现点击外部区域自动关闭（click outside）
• 禁用状态下阻止所有交互
• 外部 v-model 变化时需同步内部状态
• 事件监听需在组件生命周期内正确添加与移除，避免内存泄漏

如果每个 Select 类组件都独立实现这些逻辑，不仅代码冗余，还容易出现：

• 点击外部关闭失效或误触发
• 事件监听未正确卸载导致内存泄漏
• 禁用状态处理不一致
• 焦点与下拉状态不同步

设计目标

useSelect 的目标是：提供一套轻量、通用、可复用的下拉交互管理方案，将 Select 类组件的显示、焦点、点击外部关闭等核心交互逻辑完全抽象出来，让组件只需关注选项渲染与值选中逻辑。

核心特性

特性	说明
响应式下拉状态	dropdownVisible 为 ref<boolean>，实时控制面板显示
焦点状态管理	isFocused 支持样式（如边框高亮）与键盘导航基础
点击外部自动关闭	通过全局 click 事件监听实现，基于选择器 .select-e 判断（可自定义）
禁用状态安全防护	所有交互入口（如 toggle）优先检查 disabled，防止误操作
生命周期自动管理	onMounted 添加监听，onUnmounted 自动移除，无需手动处理
外部 modelValue 监听	预留 watch 位点，便于同步选中标签或其他衍生状态
泛型类型安全	支持任意类型 T 的 modelValue，完美适配 string、number、object 等

设计价值

useSelect 将 Select 类组件中最易出错、最重复的交互控制逻辑彻底剥离，使组件实现变得简洁而可靠：

所有 Select、Cascader、TreeSelect 等下拉类组件可共享同一套交互行为，确保体验高度一致 点击外部关闭逻辑集中管理，避免各组件重复实现且易遗漏卸载 焦点与禁用状态统一处理，支持无障碍与视觉反馈 组件模板只需关注“展示”与“选项选择”，交互细节完全交给 Hook 为后续扩展（如键盘导航、搜索过滤）预留清晰空间