2023-02-18 08:16:44 +00:00
|
|
|
---
|
|
|
|
|
category: Components
|
|
|
|
|
subtitle: 分段控制器
|
|
|
|
|
type: 数据展示
|
|
|
|
|
title: Segmented
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
分段控制器。
|
|
|
|
|
|
|
|
|
|
## 何时使用
|
|
|
|
|
|
|
|
|
|
- 用于展示多个选项并允许用户选择其中单个选项；
|
|
|
|
|
- 当切换选中选项时，关联区域的内容会发生变化。
|
|
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
|
|
|
|
### Segmented
|
|
|
|
|
|
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
|
|
|
| --- | --- | --- | --- | --- |
|
|
|
|
|
| block | 将宽度调整为父元素宽度的选项 | boolean | 无 | |
|
|
|
|
|
| disabled | 是否禁用 | boolean | false | |
|
2023-02-19 16:05:54 +00:00
|
|
|
| options | 数据化配置选项内容 | string[] \| number[] \| SegmentedOption[] | [] | |
|
2023-02-18 08:16:44 +00:00
|
|
|
| size | 控件尺寸 | `large` \| `middle` \| `small` | - | |
|
|
|
|
|
| value | 当前选中的值 | string \| number | | |
|
2023-02-19 16:05:54 +00:00
|
|
|
| label | 使用插槽自定义 label | v-slot:label="SegmentedBaseOption" | | |
|
|
|
|
|
|
|
|
|
|
### 事件
|
|
|
|
|
|
|
|
|
|
| 事件名称 | 说明 | 回调参数 | |
|
|
|
|
|
| -------- | -------------------- | --------------------------------- | --- |
|
|
|
|
|
| change | 选项变化时的回调函数 | function(value: string \| number) | - |
|
|
|
|
|
|
|
|
|
|
#### SegmentedBaseOption、SegmentedOption
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
interface SegmentedBaseOption {
|
|
|
|
|
value: string | number;
|
|
|
|
|
disabled?: boolean;
|
|
|
|
|
payload?: any; // payload more data
|
|
|
|
|
/**
|
|
|
|
|
* html `title` property for label
|
|
|
|
|
*/
|
|
|
|
|
title?: string;
|
|
|
|
|
className?: string;
|
|
|
|
|
}
|
|
|
|
|
interface SegmentedOption extends SegmentedBaseOption {
|
|
|
|
|
label?: VueNode | ((option: SegmentedBaseOption) => VueNode);
|
|
|
|
|
}
|
|
|
|
|
```
|
