介绍
用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。
引入
代码演示
基础用法
`active` 属性表示当前步骤的索引，从 0 起计。
自定义样式
可以通过 `active-icon` 和 `active-color` 属性设置激活状态下的图标和颜色。
竖向步骤条
可以通过设置 `direction` 属性来改变步骤条的显示方向。
API
Steps Props
| 参数 | 说明 | 类型 | 默认值 | |
|---|---|---|---|---|
| active | 当前步骤 | number / string | 0 | |
| direction | 显示方向，可选值为 vertical | string | horizontal | |
| active-color | 激活状态颜色 | string | #07c160 | |
inactive-color v2.9.1 | 未激活状态颜色 | string | #969799 | |
| active-icon | 激活状态底部图标，可选值见 [Icon 组件](https://youzan.github.io/vant/v2/#/zh-CN/icon) | string | checked | |
| inactive-icon | 未激活状态底部图标，可选值见 [Icon 组件](https://youzan.github.io/vant/v2/#/zh-CN/icon) | string | - | |
finish-icon v2.12.7 | 已完成步骤对应的底部图标，优先级高于 inactive-icon，可选值见 [Icon 组件](https://youzan.github.io/vant/v2/#/zh-CN/icon) | string | - | |
icon-prefix v2.12.15 | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](https://youzan.github.io/vant/v2/#/zh-CN/icon#props) | string | van-icon | |
| center | 是否进行居中对齐，仅在竖向展示时有效 | boolean | false |
Step Slots
| 名称 | 说明 | |
|---|---|---|
| active-icon | 自定义激活状态图标 | |
| inactive-icon | 自定义未激活状态图标 | |
finish-icon v2.12.7 | 自定义已完成步骤对应的底部图标，优先级高于 inactive-icon |
Steps Events
| 事件名 | 说明 | 回调参数 | |
|---|---|---|---|
click-step v2.5.9 | 点击步骤的标题或图标时触发 | index: number |
样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考
。
| 名称 | 默认值 | 描述 | |
|---|---|---|---|
| @step-text-color | @gray-6 | - | |
| @step-active-color | @green | - | |
| @step-process-text-color | @text-color | - | |
| @step-font-size | @font-size-md | - | |
| @step-line-color | @border-color | - | |
| @step-finish-line-color | @green | - | |
| @step-finish-text-color | @text-color | - | |
| @step-icon-size | 12px | - | |
| @step-circle-size | 5px | - | |
| @step-circle-color | @gray-6 | - | |
| @step-horizontal-title-font-size | @font-size-sm | - | |
| @steps-background-color | @white | - |
效果图：
