Steps 步骤条
用于引导用户按照流程完成任务，或向用户展示当前所处的步骤状态。
提示
wd-step 已直接支持 title、icon 和 description 插槽，无需再设置旧版的 *-slot 控制字段。
组件类型
基本用法
active 为当前步骤进度，对应步骤下标。
html
<wd-steps :active="0">
<wd-step />
<wd-step />
<wd-step />
</wd-steps>标题和描述信息
通过 title 和 description 设置每个步骤的标题和描述。
html
<wd-steps :active="active" align-center>
<wd-step title="步骤1" description="注册1个账号" />
<wd-step title="步骤2" description="登录账号并绑定手机" />
<wd-step title="步骤3" description="完善个人信息" />
</wd-steps>
<wd-button size="small" @click="nextStep">下一步</wd-button>ts
const active = ref(0)
function nextStep() {
active.value += 1
}修改图标
通过 icon 设置步骤图标。
html
<wd-steps :active="1" align-center>
<wd-step icon="settings" />
<wd-step icon="list" />
<wd-step icon="clock-circle" />
</wd-steps>组件状态
修改状态
通过 status 设置指定步骤的状态。
html
<wd-steps :active="1" align-center>
<wd-step title="绑定手机" />
<wd-step title="重新绑定手机" status="error" />
<wd-step title="步骤3" />
</wd-steps>组件样式
水平居中
设置 align-center 水平居中，只对横向步骤条有效。
html
<wd-steps :active="0" align-center>
<wd-step />
<wd-step />
<wd-step />
</wd-steps>布局能力
竖向步骤条
设置 vertical 以垂直方向展示。
html
<wd-steps :active="1" vertical>
<wd-step description="注册1个账号" />
<wd-step description="登录账号并绑定手机" />
<wd-step description="完善个人信息" />
</wd-steps>特殊样式
点状步骤条
设置 dot 使用点状步骤条。
html
<wd-steps :active="1" align-center dot>
<wd-step title="步骤1" description="注册1个账号" />
<wd-step title="步骤2" description="登录账号并绑定手机" />
<wd-step title="步骤3" description="完善个人信息" />
</wd-steps>可控制的点状步骤条
点状步骤条支持通过外部 active 控制当前步骤。
html
<wd-steps :active="dotActive" align-center dot>
<wd-step title="步骤1" description="注册一个账号" />
<wd-step title="步骤2" description="登录账号并绑定手机" />
<wd-step title="步骤3" description="完善个人信息" />
</wd-steps>竖向点状步骤条
vertical 和 dot 可以组合使用。
html
<wd-steps :active="1" vertical dot>
<wd-step description="注册1个账号" />
<wd-step description="登录账号并绑定手机" />
<wd-step description="完善个人信息" />
</wd-steps>Steps Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| active | 当前激活步骤下标 | number | 0 |
| vertical | 是否垂直方向展示 | boolean | false |
| dot | 是否使用点状步骤条 | boolean | false |
| space | 步骤条间距，默认自动计算 | string | '' |
| align-center | 是否水平居中，只对横向步骤条有效 | boolean | false |
| custom-class | 根节点自定义类名 | string | '' |
| custom-style | 根节点自定义样式 | string | '' |
Step Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 步骤标题，不传时显示默认文案 | string | - |
| description | 步骤描述 | string | - |
| icon | 步骤图标 | string | - |
| status | 步骤状态，可选值为 finished、process、error、wait | StepStatus | - |
| custom-class | 根节点自定义类名 | string | '' |
| custom-style | 根节点自定义样式 | string | '' |
Steps Slots
| name | 说明 |
|---|---|
| default | Step 列表 |
Step Slots
| name | 说明 |
|---|---|
| icon | 自定义步骤图标 |
| title | 自定义步骤标题 |
| description | 自定义步骤描述 |
主题定制
CSS 变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --wot-step-content-margin-top | $spacing-super-tight | 内容区距头部的顶部外边距 |
| --wot-step-vertical-content-margin-left | $n-32 | 垂直布局时内容区的左外边距 |
| --wot-step-vertical-content-padding-bottom | $n-20 | 垂直布局时内容区的底部内边距 |
| --wot-step-vertical-header-dot-top | $n-6 | 垂直布局且为点状指示器时，头部的顶部绝对定位距离 |
| --wot-step-indicator-size | $n-18 | 圆形指示器的宽高尺寸 |
| --wot-step-circle-border-radius | $radius-radius-full | 圆形指示器的圆角大小 |
| --wot-step-circle-bg | $filled-strong | 等待 (wait) 状态下圆形指示器的背景色 |
| --wot-step-process-bg | $primary-6 | 进行中 (process) 状态下圆形指示器的背景色 |
| --wot-step-finished-bg | $primary-1 | 已完成 (finished) 状态下圆形指示器的背景色 |
| --wot-step-error-bg | $danger-main | 错误 (error) 状态下圆形指示器的背景色 |
| --wot-step-circle-text-font-size | $typography-label-size-main | 圆形指示器内部文本的字号 |
| --wot-step-circle-text-line-height | $typography-label-line--height-size-main | 圆形指示器内部文本的行高 |
| --wot-step-circle-text-font-weight | $font-weight-medium | 圆形指示器内部文本的字重 |
| --wot-step-circle-text-color | $text-secondary | 等待状态或默认状态下圆形指示器内文本颜色 |
| --wot-step-circle-text-process-color | $text-white | 进行中状态下圆形指示器内文本颜色 |
| --wot-step-circle-text-finished-color | $primary-6 | 已完成状态下圆形指示器内文本颜色 |
| --wot-step-circle-icon-size | $n-12 | 圆形指示器内置状态图标 (如完成时的对号或错误时的叉号) 的字号大小 |
| --wot-step-icon-size | $n-18 | 外部自定义传入的图标 (通过 icon 属性) 的字号大小 |
| --wot-step-icon-color | $icon-auxiliary | 等待或默认状态下图标的颜色 |
| --wot-step-icon-color-active | $primary-6 | 激活 (如 process 或 finished) 状态下图标的颜色 |
| --wot-step-icon-error-color | $danger-main | 错误 (error) 状态下图标的颜色 |
| --wot-step-inactive-color | $text-placeholder | 未激活部分的占位文本颜色 |
| --wot-step-error-color | $text-white | 错误状态整体的主色调（纯白文本场景下等使用） |
| --wot-step-line-spacing | $spacing-tight | 连接线与两侧指示器之间的间距 |
| --wot-step-line-color | $border-main | 连接线的默认底色 (对应未激活的线段) |
| --wot-step-line-active-color | $primary-6 | 激活 (完成状态) 下连接线的颜色 |
| --wot-step-dot-size | $n-10 | 点状指示器的宽高尺寸 |
| --wot-step-dot-wait-bg | $filled-strong | 等待 (wait) 状态下点状指示器的背景色 |
| --wot-step-dot-process-bg | $primary-6 | 进行中 (process) 状态下点状指示器的背景色 |
| --wot-step-dot-process-border-color | $primary-3 | 进行中 (process) 状态下点状指示器的描边颜色 |
| --wot-step-dot-finished-bg | $primary-3 | 已完成 (finished) 状态下点状指示器的背景色 |
| --wot-step-dot-finished-border-color | $primary-6 | 已完成 (finished) 状态下点状指示器的描边颜色 |
| --wot-step-dot-error-bg | $danger-main | 错误 (error) 状态下点状指示器的背景色 |
| --wot-step-title-font-size | $typography-body-size-main | 标题文本字号大小 |
| --wot-step-title-line-height | $typography-body-line--height-size-main | 标题文本行高 |
| --wot-step-title-font-weight | $font-weight-regular | 标题文本字重 |
| --wot-step-title-color | $text-secondary | 等待与完成状态下标题的颜色 |
| --wot-step-title-color-active | $primary-6 | 进行中状态下标题的激活颜色 |
| --wot-step-title-error-color | $danger-main | 错误状态下标题的颜色 |
| --wot-step-description-font-size | $typography-label-size-main | 描述文本字号大小 |
| --wot-step-description-line-height | $typography-label-line--height-size-main | 描述文本行高 |
| --wot-step-description-font-weight | $font-weight-regular | 描述文本字重 |
| --wot-step-description-color | $text-secondary | 描述文本颜色 |
| --wot-step-description-margin-top | $spacing-super-tight | 描述文本距标题的距离 |
| --wot-step-description-padding | $padding-zero $padding-ultra-tight | 描述文本的内边距 |