步骤
引导用户按照流程完成任务。其步数可以根据实际应用场景进行设置,且步数不能少于2。
基本用法
简单的步骤吧。
设置Number类型的active属性,表示步骤的索引,从0开始。当步骤的宽度需要固定时,可以设置space属性,接受Number类型。 space属性的单位为px。如果未设置,则它是响应式的。设置 finish-status 属性可以更改已完成步骤的状态。
包含状态的步骤栏
显示每个步骤的步骤状态。
使用 title 属性设置步骤的名称,或使用命名的 slot 覆盖该属性。我们已在本页末尾为您列出了所有插槽名称。
中心
标题和描述可以居中。
带描述的步骤栏
每个步骤都有说明。
带图标的步骤栏
步骤栏中可以使用各种自定义图标。
图标由 icon 属性设置。图标的类型可以在图标组件的文档中找到。另外,您可以通过名为slot的自定义图标。
垂直步进栏
垂直台阶栏。
您只需在 el-steps 元素中将 direction 属性设置为 vertical 即可。
简单步骤栏
简单步骤条,其中 align-center、description、direction 和 space 将被忽略。
步骤 API
步骤属性
| 名称 | 描述 | 类型 | 默认 |
|---|---|---|---|
| 空间 | 每个步骤的间距,如果省略,将会响应。支持百分比。 | 数字 / 字符串 | '' |
| 方向 | 显示方向 | 枚举 | 水平 |
| 活跃 | 当前激活步骤 | 数字 | 0 |
| 进程状态 | 当前步骤的状态 | 枚举 | 流程 |
| 完成状态 | 结束步骤的状态 | 枚举 | 完成 |
| 居中对齐 | 中心标题和描述 | 布尔值 | — |
| 简单 | 是否应用简单主题 | 布尔值 | — |
步骤事件
| 名称 | 描述 | 参数 |
|---|---|---|
| 改变 | 当活动步骤改变时触发 | 功能 |
步骤插槽
| 名称 | 描述 | 子标签 |
|---|---|---|
| 默认 | 自定义默认内容 | 步骤 |
步骤 API
步骤属性
| 名称 | 描述 | 类型 | 默认 |
|---|---|---|---|
| 标题 | 步骤标题 | 字符串 | '' |
| 描述 | 步骤说明 | 字符串 | '' |
| 图标 | 步骤自定义图标。图标也可以通过命名槽传递 | 字符串 / 组件 | — |
| 状态 | 当前状态。如果没有配置,会由Steps自动设置。 | 枚举 | '' |
步骤槽
| 名称 | 描述 |
|---|---|
| 图标 | 自定义图标 |
| 标题 | 步骤标题 |
| 描述 | 步骤说明 |