Select 选择器

Select 组件用于从一组预定义选项中选择一个或多个值。

Storybook

引入

import { Select, SelectItem } from '@versakit/vue'

使用

loading

API

Select 属性

属性名	说明	类型	默认值
modelValue	选择器的值	string | number | Array<string | number>	-
placeholder	占位符	string	'请选择'
disabled	是否禁用	boolean	false
selectionMode	选择模式	'single' | 'multiple'	'single'
size	尺寸	'sm' | 'md' | 'lg'	'md'
color	颜色变体	'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'	'default'
variant	外观变体	'flat' | 'bordered' | 'underlined'	'bordered'
radius	圆角大小	'none' | 'sm' | 'md' | 'lg' | 'full'	'md'
label	标签文本	string	-
labelPlacement	标签位置	'inside' | 'outside' | 'outside-left'	'inside'
description	描述文本	string	-
errorMessage	错误消息	string	-
isInvalid	是否无效	boolean	false
isRequired	是否必填	boolean	false
isClearable	是否可清除	boolean	false
isFilterable	是否可搜索	boolean	false
maxDropdownHeight	最大下拉框高度	number	256
disabledKeys	禁用的选项键值	string[]	-
disableSelectorIconRotation	禁用选择器图标旋转	boolean	false
startContent	左侧内容	string	-
endContent	右侧内容	string	-
showScrollIndicators	是否显示滚动指示器	boolean	true
noMatchText	无匹配选项时显示的文本	string	'无匹配选项'

Select 事件

事件名	说明	参数
update:modelValue	值变化时触发	(value: string | number | Array<string | number>)
change	值变化时触发	(value: string | number | Array<string | number>)
focus	获取焦点时触发	-
blur	失去焦点时触发	-
open-change	下拉菜单打开状态变化时触发	(isOpen: boolean)

Select 插槽

名称	说明	参数
default	默认插槽，用于放置 SelectItem 组件	-
startContent	选择器左侧内容	-
endContent	选择器右侧内容	-
value	自定义选中值的渲染	{ selected: SelectItem[] }
selectorIcon	自定义选择器图标	-

SelectItem 属性

属性名	说明	类型	默认值
key	选项键值	string	必填
label	选项标签	string	-
description	选项描述	string	-
disabled	是否禁用	boolean	false
startContent	左侧内容	string	-
endContent	右侧内容	string	-

SelectItem 插槽

名称	说明	参数
default	默认插槽，用于自定义选项内容	-
description	自定义描述内容	-
startContent	选项左侧内容	-
endContent	选项右侧内容	-
selectedIcon	自定义选中图标	-

数据属性

Select 组件在根元素上添加以下数据属性：

• data-open: 下拉菜单是否打开
• data-disabled: 选择器是否禁用
• data-focus: 选择器是否聚焦
• data-invalid: 选择器是否无效

SelectItem 组件在根元素上添加以下数据属性：

• data-key: 选项的键值
• data-selected: 选项是否被选中
• data-disabled: 选项是否禁用
• data-focus: 选项是否聚焦
• data-hover: 选项是否悬停
• data-pressed: 选项是否按下