# Steps 步骤条

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

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# 基本使用

说明

由于安卓nvue下，overflow属性不支持visible值，故此组件暂不支持安卓nvue环境。

  • 通过current参数标识目前处于第几步，从0开始
<template>
	<zx-steps current="0">
		<zx-steps-item title="已下单" desc="10:30">
		</zx-steps-item>
		<zx-steps-item title="已出库" desc="10:35" ></zx-steps-item>
		<zx-steps-item title="运输中" desc="11:40"></zx-steps-item>
	</zx-steps>
</template>

# 错误状态

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

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

# 步骤条模式

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

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

# 竖向模式

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

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

# 自定义图标

  • 通过activeIcon可以设置激活状态的图标
  • 通过inactiveIcon可以设置非激活状态的图标
<zx-steps
	current="1" activeIcon="checkmark" inactiveIcon="arrow-right">
	<zx-steps-item title="已下单" desc="10:30"></zx-steps-item>
	<zx-steps-item title="已出库" desc="10:35"></zx-steps-item>
	<zx-steps-item title="运输中" desc="11:40"></zx-steps-item>
</zx-steps>

# 通过插槽自定义样式

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

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

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

# API

# Steps Props

参数 说明 类型 默认值 可选值
direction row-横向，column-竖向 String row column
current 设置当前处于第几步 Number | String 0 -
activeColor 激活状态颜色 String #3c9cff -
inactiveColor 未激活状态颜色 String #969799 -
activeIcon 激活状态的图标 String - -
inactiveIcon 未激活状态图标 String - -
dot 是否显示点类型 Boolean false true

# Steps Item Props

参数 说明 类型 默认值 可选值
title 标题文字 String - -
desc 描述文本 String - -
iconSize 图标大小 String | Number 17 -
error 当前步骤是否处于失败状态 Boolean false true

# Slot

名称 说明
- 自定步骤状态内容