Steps 步骤条
引导用户按照流程完成任务的分步导航条，支持水平和垂直方向、自定义图标、点状样式等。
基础用法
通过 items 定义步骤，current 设置当前步骤（从 0 开始）。
创建账号
填写基本信息
2
邮箱验证
验证您的邮箱地址
3
完成注册
开始使用
不同状态
可对每个步骤单独设置 status：wait / process / finish / error。
已完成
已完成的步骤
2
进行中
当前正在处理
3
待处理
等待执行
出错
此步骤发生错误
错误状态
设置 status 为 error 标记当前步骤出错。
创建账号
填写基本信息
邮箱验证
验证失败，请重新验证
3
完成注册
开始使用
垂直方向
设置 direction 为 vertical 垂直排列。
创建账号
填写基本信息
2
邮箱验证
验证您的邮箱地址
3
完成注册
开始使用
点状样式
设置 dot 为 true 使用点状步骤条，适合简单场景。
订单提交
填写订单信息
付款
选择付款方式
发货
等待卖家发货
确认收货
确认商品无误
迷你尺寸
设置 size 为 sm 缩小步骤条。
创建账号
填写基本信息
2
邮箱验证
验证您的邮箱地址
3
完成注册
开始使用
可点击切换
设置 clickable 允许点击步骤切换当前步骤，支持 v-model:current。
1
第一步
基础配置
2
第二步
详细设置
3
第三步
确认提交
当前步骤：0 — 第一步
带描述的步骤
每个步骤可设置 description 补充说明。
填写信息
请确保信息真实有效，提交后将不可修改
2
身份验证
系统将在 24 小时内完成审核
3
审核通过
审核通过后即可使用全部功能
Steps Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
items | StepItem[] | — | 步骤数据（必填） |
current | number | 0 | 当前步骤索引 |
status | 'process' | 'error' | 'finish' | 'process' | 当前步骤的状态 |
direction | 'horizontal' | 'vertical' | 'horizontal' | 显示方向 |
size | 'md' | 'sm' | 'md' | 尺寸 |
dot | boolean | false | 是否使用点状样式 |
clickable | boolean | false | 是否允许点击步骤切换 |
StepItem 属性
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | — | 步骤标题 |
description | string | — | 步骤描述 |
status | 'wait' | 'process' | 'finish' | 'error' | — | 单独设置该步骤状态，优先级高于 current |
icon | Component | — | 自定义图标组件 |
clickable | boolean | — | 单独控制该步骤是否可点击，优先级高于组件 clickable |
Events
| 事件名 | 类型 | 说明 |
|---|---|---|
update:current | (current: number) => void | 当前步骤改变时触发，用于 v-model:current |
change | (current: number) => void | 点击可点击步骤时触发 |