Skip to content

Steps 步骤条

破坏性更新提醒

1.2.10版本step组件废弃了title-sloticon-slotdescription-slot等三个控制插槽使用的字段,新增支持直接使用titleicondescription插槽,同时废弃了default插槽。

基本用法

active 为步骤进度,为 number 类型,步骤的下标。

html
<wd-steps :active="active">
  <wd-step />
  <wd-step />
  <wd-step />
</wd-steps>
ts
const active = ref<number>(0)

function nextStep() {
  active.value = active.value + 1
}

水平居中

设置 align-center 水平居中,只对横向步骤条有效。

html
<wd-steps :active="0" align-center>
  <wd-step />
  <wd-step />
  <wd-step />
</wd-steps>

设置标题和描述信息

可以通过 titledescription 设置步骤的标题和描述信息。如果不设置标题,则会使用默认的文案。

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<number>(0)

function nextStep() {
  active.value = active.value + 1
}

修改图标

可以通过 icon 属性设置步骤的图标,传入图标的名称,也可以通过 icon 的 slot 插槽自定义图标,使用插槽需要设置 icon-slottrue

html
<wd-steps :active="1" align-center>
  <wd-step icon="invite" />
  <wd-step icon="link" />
  <wd-step icon="clock" />
</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" vertical dot>
  <wd-step description="注册1个账号" />
  <wd-step description="登录账号并绑定手机" />
  <wd-step description="完善个人信息" />
</wd-steps>

修改状态

设置 status,支持 'finished'(完成)、'process'(进行中)、'error'(失败) 三种状态。

html
<wd-steps :active="1" align-center>
  <wd-step title="绑定手机" status="error" />
  <wd-step title="重新绑定手机" />
  <wd-step title="步骤3" />
</wd-steps>

Steps Attributes

参数说明类型可选值默认值最低版本
active步骤进度number-0-
vertical垂直方向boolean-false-
dot点状步骤条dot-false-
space步骤条间距,默认为自动计算string---
align-center是否水平居中,只对横向步骤条有效boolean-false-

Step Attributes

参数说明类型可选值默认值最低版本
title标题,如果没有则为默认文案。当只有标题而没有描述时,标题的字号会小2号string---
title-slot 使用 title 插槽时需要设置该属性,已废弃,直接使用title插槽即可boolean-false-
description描述string---
description-slot使用 description 插槽时需要设置该属性,已废弃,直接使用description插槽即可boolean-false-
icon图标string---
icon-slot使用 icon 插槽时需要设置该属性,已废弃,直接使用icon插槽即可boolean-false-
status步骤状态stringfinished / process / error--

Step Slot

name说明最低版本
icon图标1.2.10
title标题1.2.10
description描述1.2.10

Steps 外部样式类

类名说明最低版本
custom-class根节点样式-

Step 外部样式类

类名说明最低版本
custom-class根节点样式-

Released under the MIT License.

Released under the MIT License.