Steps 步骤条

引导用户按照流程完成任务的分步导航条， 可根据实际应用场景设定步骤，步骤不得少于 2 步。

import { createApp } from 'vue'
import { ElSteps } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElSteps)

基础用法

简单的步骤条。

含状态的步骤条

每一步骤显示出该步骤的状态。

居中的步骤条

标题和描述可以居中。

带描述的步骤栏

每一步都有描述。

带图标的步骤条

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

垂直的步骤条

垂直方向的步骤条。

简洁风格的步骤条

设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。

Steps API

Steps Attributes

属性名	说明	类型	默认
space	每个 step 的间距，不填写将自适应间距。 支持百分比。	number / string	''
direction	显示方向	enum	horizontal
active	设置当前激活步骤	number	0
process-status	设置当前步骤的状态	enum	process
finish-status	设置结束步骤的状态	enum	finish
align-center	进行居中对齐	boolean	—
simple	是否应用简洁风格	boolean	—

Steps Events

插槽名	说明	参数：
change	当活动步骤发生变化时触发	Function

Steps Slots

属性名	说明	子标签
default	默认插槽	Step

Step API

Step Attributes

插槽名	说明	类型	默认
title	标题	string	''
description	描述文案	string	''
icon	Step 组件的自定义图标。 也支持 slot 方式写入	string / Component	—
status	设置当前步骤的状态， 不设置则根据 steps 确定状态	enum	''

Step Slots

方法名	描述
icon	自定义图标
title	自定义标题
description	自定义描述文案