Skip to content

Select 选择器

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

引入

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

使用

loading

API

Select 属性

属性名说明类型默认值
modelValue选择器的值string | number | Array<string | number>-
placeholder占位符string'请选择'
disabled是否禁用booleanfalse
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是否无效booleanfalse
isRequired是否必填booleanfalse
isClearable是否可清除booleanfalse
isFilterable是否可搜索booleanfalse
maxDropdownHeight最大下拉框高度number256
disabledKeys禁用的选项键值string[]-
disableSelectorIconRotation禁用选择器图标旋转booleanfalse
startContent左侧内容string-
endContent右侧内容string-
showScrollIndicators是否显示滚动指示器booleantrue
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是否禁用booleanfalse
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: 选项是否按下