分段控制器

显示多个选项,并允许用户选择单个选项。

基础用法

设置 v-model 绑定选中的选项值。

垂直模式 2.8.7

设置 vertical 改变方向。

禁用状态

将分段控制器或选项的 disabled 设置为 true 以禁用它。

自定义选项的别名 2.9.8

当你的 options 格式与默认格式不同时,你可以通过 props 属性自定义 options 的别名。

块级

设置 blocktrue 以适应父元素的宽度。

自定义内容

使用默认插槽渲染自定义内容。

自定义样式

使用 CSS 变量设置自定义样式。

API

属性

名称描述类型默认值
model-value / v-model绑定值string / number / boolean
options选项的数据array[]
props 2.9.8配置选项,请参见下表object
size组件尺寸枚举''
块级适应父元素宽度booleanfalse
disabled是否禁用分段控制器booleanfalse
validate-event是否触发表单验证booleantrue
名称原生 name 属性string
id原生 id 属性string
aria-label 无障碍原生 aria-label 属性string
方向 2.8.7显示方向枚举horizontal

props

属性描述类型默认值
value指定节点对象的哪个键用作节点的值stringvalue
label指定节点对象的哪个键用作节点的标签stringlabel
disabled指定节点对象的哪个键用作节点的禁用stringdisabled

事件

名称描述类型
change当选中值改变时触发,参数是当前选中的值Function

插槽

名称描述类型
default选项渲染器object

类型声明

显示声明
ts
type Option = Record<string, any> | string | number | boolean

来源

组件样式文档

贡献者