Steps 步骤条
步骤进度指示。参考 Naive UI 设计（MIT 许可），支持状态、尺寸、竖排、可点击切换、自定义图标插槽。
基本用法
✓
提交
填写信息
2
审核
等待审核
3
完成
处理完毕
vue
<ASteps :current="2">
<AStep title="提交" description="填写信息" />
<AStep title="审核" />
<AStep title="完成" />
</ASteps>可点击
点击步骤可更新当前进度。
1
第一步
可点击切换到此处
2
第二步
可点击切换到此处
3
第三步
可点击切换到此处
vue
<ASteps :current="current" @update:current="(v) => current = v">
<AStep title="第一步" />
<AStep title="第二步" />
<AStep title="第三步" />
</ASteps>不同状态
status 控制当前步骤的状态，可选 process / error。
✓
提交
填写信息
✕
审核
审核异常
3
完成
处理完毕
vue
<ASteps :current="2" status="error">
<AStep title="提交" />
<AStep title="审核" />
<AStep title="完成" />
</ASteps>竖向排列
✓
提交
填写信息
2
审核
等待审核
3
完成
处理完毕
vue
<ASteps :current="1" vertical>
<AStep title="提交" description="填写信息" />
<AStep title="审核" description="等待审核" />
<AStep title="完成" description="处理完毕" />
</ASteps>内容在下
✓
提交
填写信息
2
审核
等待审核
3
完成
处理完毕
vue
<ASteps :current="1" content-placement="bottom">
<AStep title="提交" description="填写信息" />
<AStep title="审核" description="等待审核" />
<AStep title="完成" description="处理完毕" />
</ASteps>禁用步骤
✓
提交
填写信息
2
审核
审核中
3
完成
暂时不可用
vue
<ASteps :current="1">
<AStep title="提交" />
<AStep title="审核" />
<AStep title="完成" disabled />
</ASteps>Props
ASteps
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| current | number | — | 当前步骤索引 |
| status | 'process'|'finish'|'error'|'wait' | 'process' | 当前步骤状态 |
| size | 'small'|'medium' | 'medium' | 尺寸 |
| vertical | boolean | false | 竖向排列 |
| content-placement | 'right'|'bottom' | 'right' | 内容位置 |
| onUpdate:current | (v: number) => void | — | 点击步骤触发 |
AStep
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | string | — | 标题 |
| description | string | — | 描述 |
| status | 'process'|'finish'|'error'|'wait' | — | 覆盖状态 |
| disabled | boolean | false | 禁用点击 |
| internalIndex | number | — | 自动填充，用户无需设置 |