Skip to content

选择器

@astryxdesign/core v0.7.1 · Selector

Selector Props ​

名称类型默认值说明
modelValuestring | number | nullnull选中的值。
optionsSelectorOption[]必需选项数组。每项可以带 disabled、description 和 action。只要有一项的 action 不是空的,弹出层就变成两列网格,点操作不会改选择。
placeholderstringSelect… / 请选择占位符文本。未设置语言时为英文,提供 zh-CN 后为中文。
searchablebooleanfalse是否支持搜索。
clearablebooleanfalse是否可清除。
hasClearbooleanfalse选中值时显示清除按钮,清除会把 null 交给 change。和旧名 clearable 等价,两者任一为真即生效。
disabledbooleanfalse是否禁用。
disabledMessagestring—禁用原因。和 disabled 一起用时,鼠标悬停或键盘聚焦会弹出提示,触发器靠 aria-disabled 保持可聚焦,但仍然打不开列表。不用再在外面套 Tooltip:禁用的控件收不到悬停事件。旧名 disabledReason 等价。
size'sm' | 'md' | 'lg''md'选择器尺寸。
variant'input' | 'secondary' | 'ghost' | 'default''default'input 和旧名 default 都是带边框的输入框。secondary 对齐次要按钮。ghost 去掉边框,适合工具栏。后两种上的 attached 状态会收成独立说明。
isLabelHiddenbooleanfalse视觉上隐藏标签,读屏仍然读得到。
containerClass / containerStyleclass / style—加到字段外壳。不会落到触发按钮上。
controlClass / controlStyleclass / style—加到画边框的本体。根上直接写的 class 和 style 也落在这里。
status'default' | 'error' | 'warning' | 'success''default'状态样式。
labelstring—可见标签。不传时用占位文本作为隐藏的无障碍名称。
descriptionstring—标签下方的说明。
isReadOnlybooleanfalse只读。值还在,可以聚焦并提交,但不能打开、清除。不变暗。和禁用同时设置时按禁用处理。
isLoadingbooleanfalse触发器显示加载指示。加载完成前不显示空状态。
isOptionalbooleanfalse在标签旁标成可选。
isRequiredbooleanfalse在标签旁标成必填,并设置 aria-required。
indicatorPosition'start' | 'end''end'单选标记放在选项的哪一侧。没选中时默认的勾不占位。主题把勾换成圆点后,没选中的行也会画出空心圆。
emptyTextstring无匹配项 / No matches没有任何选项时的文案。
emptySearchTextstring未找到结果 / No results found搜索没有命中时的文案。

Selector Emits ​

名称载荷说明
update:modelValuevalue: string | number | null值变化时触发。
changevalue: string | number | null值变化时触发。
searchquery: string搜索输入时触发。
clickevent: MouseEvent触发器上的点击,在面板切换之前触发。preventDefault() 不会让面板保持关闭。
focusevent: FocusEvent触发器获得焦点时触发。
keydownevent: KeyboardEvent触发器上内置键盘模型没处理的按键才触发。它处理并取消的按键不再透出。

Selector Slots ​

名称参数说明
selected{ option: SelectorOption | null }自定义选中项显示。
option{ option: SelectorOption, isActive: boolean, isSelected: boolean }自定义选项显示。
empty—自定义空状态。