Steps 步骤条

介绍

用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。

基础用法

通过 active 属性来设置激活的步骤索引。

<vd-steps :active="active">
  <vd-step title="步骤1" content="步骤1的描述内容" />
  <vd-step title="步骤2" content="步骤2的描述内容" />
  <vd-step title="步骤3" content="步骤3的描述内容" />
</vd-steps>

const active = ref(1);

自定义样式

通过 icon 属性来设置步骤图标，通过 color 属性来设置步骤颜色。

<vd-steps :active="active">
  <vd-step title="步骤1" content="步骤1的描述内容" />
  <vd-step title="步骤2" content="步骤2的描述内容" />
  <vd-step title="步骤3" content="步骤3的描述内容" icon="round-close-fill" color="#ee0a24" />
</vd-steps>

const active = ref(2);

竖向步骤条

通过 vertical 属性来设置竖向步骤条。

<vd-steps :active="active" vertical>
  <vd-step title="步骤1" content="步骤1的描述内容" />
  <vd-step title="步骤2" content="步骤2的描述内容" />
  <vd-step title="步骤3" content="步骤3的描述内容" />
</vd-steps>

const active = ref(1);

API

Steps Props

参数	说明	类型	默认值
active	激活步骤索引	string | number	-
icon	激活图标	IconsName	'round-check-fill'
finish-icon	完成时图标	IconsName	'round-check'
inactive-icon	非激活图标	IconsName	'round-check'
color	激活颜色	string	-
inactive-color	非激活颜色	string	-
vertical	是否纵向排列	boolean	false

Step Props

| title | 标题 | string | - | content | 内容 | string | - | icon | 激活图标 | IconsName | - | finish-icon | 完成时图标 | IconsName | - | inactive-icon | 非激活图标 | IconsName | - | color | 激活颜色 | string | - | inactive-color | 非激活颜色 | string | -

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Steps Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

Step Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

Steps Slots

名称	说明
default	步骤条内容

Step Slots

名称	说明
icon	步骤图标
title	步骤标题
content	步骤内容