Segmented 分段控制器
用于展示多个选项并允许用户选择其中单个选项。
基础用法
设置v-model为选项值。
禁用状态
设置 disabled 属性来禁用一些选项。
Block 分段选择器
设置block为true以适应父元素的宽度。
自定义内容
设置 default slot 位来渲染自定义内容。
自定义样式
设置 default slot 位来渲染自定义内容。
API
属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | string / number | — |
| options | 选项的数据 | array | [] |
| size | 组件大小 | enum | '' |
| block | 撑满父元素宽度 | boolean | — |
| disabled | 是否禁用 | boolean | false |
| validate-event | 是否触发表单验证 | boolean | true |
| name | 原生 name 属性 | string | — |
| id | 原生 id 属性 | string | — |
| aria-label a11y | 原生 aria-label 属性 | string | — |
事件
| 名称 | 说明 | 类型 |
|---|---|---|
| change | 当所选值更改时触发，参数是当前选中的值 | Function |
Slots
| 名称 | 说明 |
|---|---|
| default | 自定义 Option 模板 |
类型声明
Show declarations
type Option = {
label: string
value: string | number | boolean
disabled?: boolean
[key: string]: any
} | string | number | boolean | undefined
kooriookami