Select 下拉选择

带键盘导航的下拉选择器,面板以 ease-out 进入,选项支持 hover 高亮与方向键操作。

基础用法

当前值: 空

<script setup>
import { ref } from 'vue'
const value = ref(null)
const options = [
  { label: '苹果', value: 'apple' },
  { label: '香蕉', value: 'banana' }
]
</script>

<template>
  <ASelect v-model="value" :options="options" placeholder="请选择水果" />
</template>

可清除

支持 clearable 在已选择时显示清除按钮,点击后回到未选状态。

<ASelect v-model="value" :options="options" clearable />

禁用项与禁用选择器

<ASelect :options="options" disabled placeholder="不可选" />

尺寸

<ASelect v-model="value" :options="options" size="sm" />
<ASelect v-model="value" :options="options" size="md" />
<ASelect v-model="value" :options="options" size="lg" />

API

Props

名称	类型	默认值	说明
modelValue	string | number | null	null	当前选中值
options	SelectOption[]	[]	选项数组
placeholder	string	'请选择'	未选中时占位
disabled	boolean	false	整体禁用
clearable	boolean	false	显示清除按钮
size	'sm' | 'md' | 'lg'	'md'	尺寸

SelectOption

interface SelectOption {
  label: string
  value: string | number
  disabled?: boolean
}

Emits

名称	参数	说明
update:modelValue	value	选中值改变
change	(value, option)	选中值改变,同时返回完整选项对象

键盘交互

按键	行为
Space / Enter	打开面板;面板已开时确认当前高亮项
ArrowDown / ArrowUp	移动高亮项,自动跳过禁用
Escape	关闭面板
Tab	关闭面板并将焦点交给下一个可聚焦元素

无障碍

• trigger 使用原生 <button> 承载,aria-haspopup="listbox" 与 aria-expanded 反映展开状态
• 面板使用 role="listbox",选项使用 role="option" 与 aria-selected
• 禁用项通过 aria-disabled 暴露
• 点击面板外区域或按 Escape 会自动关闭