分段控制器
显示多个选项,并允许用户选择单个选项。
基础用法
设置 v-model 绑定选中的选项值。
垂直模式 2.8.7
设置 vertical 改变方向。
禁用状态
将分段控制器或选项的 disabled 设置为 true 以禁用它。
自定义选项的别名 2.9.8
当你的 options 格式与默认格式不同时,你可以通过 props 属性自定义 options 的别名。
块级
设置 block 为 true 以适应父元素的宽度。
自定义内容
使用默认插槽渲染自定义内容。
自定义样式
使用 CSS 变量设置自定义样式。
API
属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | string / number / boolean | — |
| options | 选项的数据 | array | [] |
| props 2.9.8 | 配置选项,请参见下表 | object | — |
| size | 组件尺寸 | 枚举 | '' |
| 块级 | 适应父元素宽度 | boolean | false |
| disabled | 是否禁用分段控制器 | boolean | false |
| validate-event | 是否触发表单验证 | boolean | true |
| 名称 | 原生 name 属性 | string | — |
| id | 原生 id 属性 | string | — |
| aria-label 无障碍 | 原生 aria-label 属性 | string | — |
| 方向 2.8.7 | 显示方向 | 枚举 | horizontal |
props
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| value | 指定节点对象的哪个键用作节点的值 | string | value |
| label | 指定节点对象的哪个键用作节点的标签 | string | label |
| disabled | 指定节点对象的哪个键用作节点的禁用 | string | disabled |
事件
| 名称 | 描述 | 类型 |
|---|---|---|
| change | 当选中值改变时触发,参数是当前选中的值 | Function |
插槽
| 名称 | 描述 | 类型 |
|---|---|---|
| default | 选项渲染器 | object |
类型声明
显示声明
ts
type Option = Record<string, any> | string | number | boolean