Listbox
像 XSelect 的弹层直接铺在页面上:选项不多、要一眼看全的地方用它,不必先点开。上下键移动、Home / End 跳到首尾、按首字母跳转,多选时空格或点击切换;aria 交给 Reka。
单选与带过滤的多选
广州
上海
北京
成都(维护中)
地域:ap-guangzhou
uc
platform
ai
billing
chat
device
support
已选:uc
options与XSelect同形(value、label、disabled)。v-model单选是值,多选是数组。filterable顶上加一个过滤框,按文案包含匹配、不区分大小写;一项不剩时显示#empty插槽(缺省「没有匹配的选项」)。- 高度由
class限(h-56、max-h-64),超出在列表里滚动。
API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
options 必填 | SelectOption[] | — | — |
multiple | boolean | undefined | false | — |
disabled | boolean | undefined | false | — |
filterable | boolean | undefined | false | 顶上加一个过滤框,按文案包含过滤(不区分大小写) |
filterPlaceholder | string | undefined | undefined | — |
ariaLabel | string | undefined | undefined | — |
size | "mini" | "small" | "medium" | "large" | "super" | undefined | undefined | 尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size |
modelValue | SelectValue | SelectValue[] | — | — |
Emits
| 事件 | 载荷 | 说明 |
|---|---|---|
update:modelValue | [value: SelectValue | SelectValue[]] | — |
Slots
| 插槽 | 说明 |
|---|---|
empty | — |