@xwink/ui

    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[]——
    multipleboolean | undefinedfalse—
    disabledboolean | undefinedfalse—
    filterableboolean | undefinedfalse顶上加一个过滤框,按文案包含过滤(不区分大小写)
    filterPlaceholderstring | undefinedundefined—
    ariaLabelstring | undefinedundefined—
    size"mini" | "small" | "medium" | "large" | "super" | undefinedundefined尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size
    modelValueSelectValue | SelectValue[]——

    Emits

    事件载荷说明
    update:modelValue[value: SelectValue | SelectValue[]]—

    Slots

    插槽说明
    empty—