Steps 步骤条
引导用户按顺序完成任务，把多步流程拆解成可见的进度。
基本使用
current 标识当前进行到第几步（从 0 开始），items 描述每步标题与子说明。
全局状态
status 控制当前步骤的状态语义：process（默认）/ finish / wait / error。
单项状态
StepItem.status 可对单个步骤覆盖全局状态（用于"跳跃错误"等场景）。
垂直布局
direction="vertical" 把步骤竖排，适合配置向导或长流程。
小尺寸
size="small" 让圆点 / 文字更紧凑，适合放在 toolbar 中。
点状步骤条
progress-dot 用圆点替代序号，常用于"轻量进度"展示。
受控切换
通过 update:current 事件接收用户的点击，配合按钮控制流程进度。
API
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| current | number | 0 | 当前步骤（从 0 开始），支持 v-model:current |
| items | StepItem[] | [] | 步骤数据 |
| direction | 'horizontal' | 'vertical' | 'horizontal' | 排列方向 |
| size | 'default' | 'small' | 'default' | 尺寸 |
| type | 'default' | 'navigation' | 'default' | 风格：默认 / 导航 |
| status | StepStatus | 'process' | 当前步骤的全局状态 |
| labelPlacement | 'horizontal' | 'vertical' | 'horizontal' | 描述与标题排布 |
| progressDot | boolean | false | 点状步骤条 |
StepItem
| 字段 | 类型 | 说明 |
|---|---|---|
| title | string | 标题 |
| description | string | 子说明 |
| icon | string | 自定义 icon class |
| status | StepStatus | 单项状态（覆盖全局） |
| disabled | boolean | 禁用本步骤的点击 |
| subTitle | string | 标题右侧的辅助文案 |
Events
| 事件名 | 回调签名 | 说明 |
|---|---|---|
| update:current | (index: number) | 当前步骤变化 |
类型定义
ts
type StepStatus = 'wait' | 'process' | 'finish' | 'error'