Step 步骤条

该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景，必须是c-step-item组件的直接子组件。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
current	Number,String	0	当前激活项	All
vertical	Boolean	false	是否垂直类型	All
reverse	Boolean	false	倒序，在vertical=true时有效	All
itemGutter	Number,String	20rpx	项目前后边距	All
itemTopLineHeight	Number,String	null	项目顶部线高度，在vertical=true时有效	All
iconSize	Number,String	40rpx	图标 图标大小	All
iconGutter	Number,String	null	icon和文字的间隙 默认12rpx，竖向默认20rpx	All
inactiveIcon	String,Object	null	未激活步骤的图标 为空时显示序号	All
activeIcon	String,Object	null	当前步骤的图标	All
passedIcon	String,Object	success	激活步骤的图标	All
lineProps	Object	{}	线 未激活步骤线配置	All
activeLineProps	Object	{}	当前激活步骤线配置	All
passedLineProps	Object	{}	已经激活步骤线配置	All
titleProps	Object	{}	标题 未激活步骤的标题配置	All
activeTitleProps	Object	{}	当前步骤的标题配置	All
passedTitleProps	Object	{}	已激活步骤的标题配置	All
descProps	Object	{}	描述 未激活步骤的描述配置	All
activeDescProps	Object	{}	当前步骤的描述配置	All
passedDescProps	Object	{}	激活步骤的描述配置	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

插槽

插槽名	说明	平台
default	子组件只能是c-step-item	All

事件

事件名	说明
itemClick(index)

示例

<template>
  <c-step :current="current">
    <c-step-item title="步骤一" desc="步骤描述"></c-step-item>
    <c-step-item title="步骤二" desc="步骤描述"></c-step-item>
  </c-step>
</template>
<script setup>
import { ref } from 'vue'

const current = ref(0);
</script>