参考
分段控制器 Segment Group
SegmentGroup:分段控制。发丝线托盘中,一块墨色底板在选中项下方移动。部件:Root、Label、Indicator、Item、ItemText、ItemControl、ItemHiddenInput。
#Indicator
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#ItemContext
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#ItemControl
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#ItemHiddenInput
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#ItemText
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Item
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
disabled | boolean | undefined | — | |
invalid | boolean | undefined | — | |
value | string | — |
#Label
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Root
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
size | String as PropType<"sm" | "md" | "lg"> | "md" | 分段控件的尺寸档位;组件族保持紧凑规格,各档比全局阶梯低一级,默认 md 使用小尺寸高度 |
orientation | String as PropType<"horizontal" | "vertical"> | "horizontal" | 分段控件的方向;底层状态机默认垂直堆叠,水平排列需要显式设置 |
defaultValue | string | 分段组首次渲染时的初始值;不需要控制分段组状态时使用 | |
disabled | boolean | 为 true 时禁用分段组 | |
form | string | 底层 input 关联的表单 | |
id | string | 组件内部状态机的唯一标识 | |
ids | Partial<{ root: string; label: string; indicator: string; item(value: string): string; itemLabel(value: string): string; itemControl(value: string): string; itemHiddenInput(value: string): string; }> | 单选组件各元素的 id,适合组合使用 | |
modelValue | string | null | 分段组的 v-model 值 | |
name | string | 单选组件 input 字段的 name,用于表单提交 | |
readOnly | boolean | 分段组是否只读 |
| 事件 | 载荷 |
|---|---|
valueChange | details: ValueChangeDetails |
update:modelValue | value: string | null |