Skip to content
On this page

Steps 标签页

基本用法

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

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

水平居中

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

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

设置标题和描述信息

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

html
<wd-steps :active="0" align-center>
  <wd-step title="步骤1" description="注册1个账号" />
  <wd-step title="步骤2" description="登录账号并绑定手机" />
  <wd-step title="步骤3" description="完善个人信息" />
</wd-steps>

修改图标

可以通过 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 插槽时需要设置该属性boolean-false-
description描述string---
description-slot使用 description 插槽时需要设置该属性boolean-false-
icon图标string---
icon-slot使用 icon 插槽时需要设置该属性boolean-false-
status步骤状态stringfinished / process / error--

Step Slot

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

Steps 外部样式类

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

Step 外部样式类

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

Released under the MIT License.

Released under the MIT License.