# Steps 步骤条

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

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序

# 基本使用

  • 通过list参数传入一个数组,标识步骤的总数
  • 通过current参数标识目前处于第几步,从0开始
<template>
	<view>
		<u-steps :list="numList" :current="1"></u-steps>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				numList: [{
					name: '下单'
				}, {
					name: '出库'
				}, {
					name: '运输'
				}, {
					name: '签收'
				}, ],
			}
		}
	}
</script>

# 设置步骤条的主题

  • type值可选的有primary(默认)、successinfowarningerror
  • type值和active-color(默认为空)为互斥关系,如果设置了active-color,会优先起作用
<u-steps :list="numList" active-color="#fa3534"></u-steps>

# 设置步骤条的模式

mode可以设置为dot(圆点,默认值)或者number(数字),二者有不同形式,见示例

<u-steps :list="numList" mode="number"></u-steps>

# API

# Props

参数 说明 类型 默认值 可选值
mode 设置模式 String dot number
list 数轴条数据,数组。具体见上方示例 Array [ ] -
type(1.3.7起已废弃) type主题 String primary info / success / error / warning
current 设置当前处于第几步 Number | String 0 -
direction 1.5.1 row-横向,column-竖向 String row column
active-color 已完成步骤的激活颜色,如设置,type值会失效 String - -
un-active-color 未激活的颜色,用于表示未完成步骤的颜色 String #606266 -
icon 1.3.7 mode = number时的自定义图标 String checkmark -
亿速云服务器优惠大放送,免费领红包
红包可用于(云服务器、高防服务器、裸金属服务器、高防IP、云数据库、CDN加速)购买和续费