Stepper
分步表单、开通流程的进度条。v-model 是当前步(从 1 起),完成的步显示对勾、当前步主色、连线跟着变色;键盘左右(纵向时上下)在步骤间移动、回车跳过去。
横向线性与纵向非线性
Step 2 of 0
Step 1 of 0
linear(缺省开):只能点回已完成的步或往前一步,不能越过没做的步;非线性时每一步都能点。orientation取horizontal(缺省)或vertical。步骤多、说明长、在侧栏里时用纵向。- 步骤条只管「在第几步」,每步的内容由宿主按
v-model自己切;单步不可用时给那一项disabled。
API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
items 必填 | StepperItem[] | — | — |
orientation | "vertical" | "horizontal" | undefined | "horizontal" | 缺省横向 |
linear | boolean | undefined | true | 线性(缺省):只能点回已完成的步或往前一步,不能越过没做的步;非线性时每步都能点 |
modelValue | number | undefined | 1 | — |
Emits
| 事件 | 载荷 | 说明 |
|---|---|---|
update:modelValue | [value: number] | — |