该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。

基本使用

• 通过value参数标识目前处于第几步，从0开始

<template>
	<un-steps :value="0">
		<un-steps-item title="已下单" desc="10:30">
		</un-steps-item>
		<un-steps-item title="已出库" desc="10:35" ></un-steps-item>
		<un-steps-item title="运输中" desc="11:40"></un-steps-item>
	</un-steps>
</template>

<script setup lang="ts">
	// 可根据需要添加逻辑
</script>

错误状态

如果设置un-steps-item的error参数为true的话，当前步骤将会为"失败"的状态

<template>
	<un-steps :value="1">
		<un-steps-item title="已下单" desc="10:30"></un-steps-item>
		<un-steps-item error title="仓库着火" desc="10:35"></un-steps-item>
		<un-steps-item title="破产清算" desc="11:40"></un-steps-item>
	</un-steps>
</template>

<script setup lang="ts">
	// 可根据需要添加逻辑
</script>

步骤条模式

un-steps的dot参数设置为true的话，将会以点状的形式展示步骤条样式。

<template>
	<un-steps :value="1" dot>
		<un-steps-item title="已下单" desc="10:30"></un-steps-item>
		<un-steps-item title="已出库" desc="10:35"></un-steps-item>
		<un-steps-item title="运输中" desc="11:40"></un-steps-item>
	</un-steps>
</template>

<script setup lang="ts">
	// 可根据需要添加逻辑
</script>

竖向模式

un-steps的direction参数设置为column的话，组件将会以竖向的形式展示步骤条内容。

<template>
	<un-steps :value="1" direction="column">
		<un-steps-item title="已下单" desc="10:30">
		</un-steps-item>
		<un-steps-item title="已出库" desc="10:35">
		</un-steps-item>
		<un-steps-item title="运输中" desc="11:40"></un-steps-item>
	</un-steps>
</template>

<script setup lang="ts">
	// 可根据需要添加逻辑
</script>

自定义图标

• 通过activeIcon可以设置激活状态的图标
• 通过inactiveIcon可以设置非激活状态的图标

<template>
	<un-steps
		:value="1" activeIcon="checkmark" inactiveIcon="arrow-right">
		<un-steps-item title="已下单" desc="10:30"></un-steps-item>
		<un-steps-item title="已出库" desc="10:35"></un-steps-item>
		<un-steps-item title="运输中" desc="11:40"></un-steps-item>
	</un-steps>
</template>

<script setup lang="ts">
	// 可根据需要添加逻辑
</script>

通过插槽自定义样式

通过默认插槽，可以自定义某个步骤当前状态的特殊标识

<template>
	<un-steps :value="1">
		<un-steps-item title="已下单" desc="10:30"></un-steps-item>
		<un-steps-item title="已出库" desc="10:35"></un-steps-item>
		<un-steps-item title="运输中" desc="11:40">
			<text class="slot-icon" slot="icon">运</text>
		</un-steps-item>
	</un-steps>
</template>

<script setup lang="ts">
	// 可根据需要添加逻辑
</script>

<style lang="scss">
	.slot-icon {
		width: 21px;
		height: 21px;
		background-color: $u-warning;
		border-radius: 100px;
		font-size: 12px;
		color: #fff;
		line-height: 21px;
		text-align: center;
	}
</style>

API

Steps Props

参数	说明	类型	默认值
direction	排列方向	Enum	row
value	设置第几个步骤	number	0
activeColor	激活状态颜色	string	#3c9cff
inactiveColor	未激活状态颜色	string	#969799
activeIcon	激活状态的图标	string	-
inactiveIcon	未激活状态图标	string	-
errorColor	错误状态颜色	string	#ee0a24
dot	是否显示点类型	boolean	false

Steps Item Props

参数	说明	类型	默认值
title	标题	string | number	-
desc	描述文本	string | number	-
iconSize	图标大小	string | number	17
error	当前步骤是否处于失败状态	boolean	false

Slot

名称	说明
default(默认)	自定义标题
icon	自定义图标
desc	自定义描述文本

Scss 变量

变量名	默认值	说明
$un-steps-item-wrapper-column-width	20px	垂直方向步骤项容器宽度
$un-steps-item-wrapper-column-height	32px	垂直方向步骤项容器高度
$un-steps-item-wrapper-row-width	32px	水平方向步骤项容器宽度
$un-steps-item-wrapper-row-height	20px	水平方向步骤项容器高度
$un-steps-item-wrapper-dot-size	20px	点型步骤项容器大小
$un-steps-item-circle-size	20px	圆形指示器大小
$un-steps-item-circle-border	1px solid $border-color	圆形指示器边框
$un-steps-item-dot-size	10px	点型指示器大小
$un-steps-item-content-margin	6px	内容区域边距
$un-steps-item-line-position	10px	连接线位置
$un-steps-item-line-size	1px	连接线粗细
$un-steps-item-text-size	11px	步骤文本大小
$un-steps-item-padding-bottom	5px	步骤项底部内边距

提示

组件内部默认使用 scss 变量，如需修改，请查看 scss 变量使用 文档