步骤

引导用户按照流程完成任务。其步数可以根据实际应用场景进行设置,且步数不能少于2。

基本用法

简单的步骤吧。

设置Number类型的active属性,表示步骤的索引,从0开始。当步骤的宽度需要固定时,可以设置space属性,接受Number类型。 space属性的单位为px。如果未设置,则它是响应式的。设置 finish-status 属性可以更改已完成步骤的状态。

0
Step 1
0
Step 2
0
Step 3

包含状态的步骤栏

显示每个步骤的步骤状态。

使用 title 属性设置步骤的名称,或使用命名的 slot 覆盖该属性。我们已在本页末尾为您列出了所有插槽名称。

0
Done
0
Processing
0
Step 3

中心

标题和描述可以居中。

0
Step 1
Some description
0
Step 2
Some description
0
Step 3
Some description

带描述的步骤栏

每个步骤都有说明。

0
Step 1
Some description
0
Step 2
Some description
0
Step 3
Some description

带图标的步骤栏

步骤栏中可以使用各种自定义图标。

图标由 icon 属性设置。图标的类型可以在图标组件的文档中找到。另外,您可以通过名为slot的自定义图标。

Step 1
Step 2
Step 3

垂直步进栏

垂直台阶栏。

您只需在 el-steps 元素中将 direction 属性设置为 vertical 即可。

0
Step 1
0
Step 2
0
Step 3

简单步骤栏

简单步骤条,其中 align-centerdescriptiondirectionspace 将被忽略。

Step 1
Step 2
Step 3
Step 1
Step 2
Step 3

步骤 API

步骤属性

名称描述类型默认
空间每个步骤的间距,如果省略,将会响应。支持百分比。数字 / 字符串''
方向显示方向枚举水平
活跃当前激活步骤数字0
进程状态当前步骤的状态枚举流程
完成状态结束步骤的状态枚举完成
居中对齐中心标题和描述布尔值
简单是否应用简单主题布尔值

步骤事件

名称描述参数
改变当活动步骤改变时触发功能

步骤插槽

名称描述子标签
默认自定义默认内容步骤

步骤 API

步骤属性

名称描述类型默认
标题步骤标题字符串''
描述步骤说明字符串''
图标步骤自定义图标。图标也可以通过命名槽传递字符串 / 组件
状态当前状态。如果没有配置,会由Steps自动设置。枚举''

步骤槽

名称描述
图标自定义图标
标题步骤标题
描述步骤说明