UviewUltra 4.0

Appearance

Steps 步骤条 ​

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

平台差异说明 ​

App（vue）App（uvue/uni-app-x）App（nvue）H5小程序
√√√√√

基本使用 ​

说明

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

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

错误状态 ​

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

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

步骤条模式 ​

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

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

竖向模式 ​

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

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

自定义图标 ​

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

通过插槽自定义样式 ​

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

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

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

右侧演示页面源代码地址 ​

点击以下链接以查看右侧演示页面的源码


 github  gitee

API ​

Steps Props ​

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

Steps Item Props ​

参数说明类型默认值可选值
title标题文字String--
current描述文本String--
iconSize图标大小String | Number17-
error当前步骤是否处于失败状态Booleanfalsetrue
itemStyle当前步骤自定义样式Objct{}-

Slot ​

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