uView Pro

主题

0

Steps 步骤条 ​

19:21

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

平台差异说明 ​

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序
√√√√√√√

基本使用 ​

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

<script setup lang="ts">
import { ref } from 'vue'

// 定义步骤项接口
interface StepItem {
	name: string
}

// 定义响应式数据
const numList = ref<StepItem[]>([
	{
		name: '下单'
	}, 
	{
		name: '出库'
	}, 
	{
		name: '运输'
	}, 
	{
		name: '签收'
	}
])
</script>

设置步骤条的主题 ​

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

设置步骤条的模式 ​

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

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

Step 组合 v0.3.6+ ​

u-step 为新增组件，可以完整替换 u-steps list 模式，同时也用于自定义步骤条的样式，将来可能会弃用 list 模式，推荐使用 u-steps 和 u-step 组合的方式：

html
<template>
	<u-steps :direction="direction" :current="current" :mode="mode" :icon="icon">
		<u-step v-for="(item, index) in list" :key="index" :name="item.name" :desc="item.desc" />
	</u-steps>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { StepDirection, StepMode } from '@/uni_modules/uview-pro/types/global';

const list = ref([
	{
		name: '下单',
		desc: '10:30'
	},
	{
		name: '出库',
		desc: '11:00'
	},
	{
		name: '运输',
		desc: '14:00'
	},
	{
		name: '签收',
		desc: '18:30'
	}
]);
const current = ref(0);
const icon = ref('checkmark');
const mode = ref<StepMode>('number');
const direction = ref<StepDirection>('row');
</script>

自定义slot v0.3.6+ ​

html
<template>
	<u-steps :direction="direction" :current="current" :mode="mode" :icon="icon">
		<u-step name="预约">
			<template #desc>
				<text v-show="current < 0">自定义描述</text>
				<text v-show="current >= 0" class="custom-desc">自定义描述</text>
			</template>
		</u-step>
		<u-step desc="10:30">
			<template #name>
				<text v-show="current < 1">名额确认</text>
				<text v-show="current >= 1" class="custom-name">名额不足</text>
			</template>
		</u-step>
		<u-step desc="11:00">
			<template #name>
				<text v-show="current < 2">预约成功</text>
				<text v-show="current >= 2" class="custom-error-name">预约失败</text>
			</template>
			<template #icon>
				<u-icon size="32" color="red" name="close"></u-icon>
			</template>
		</u-step>
	</u-steps>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { StepDirection, StepMode } from '@/uni_modules/uview-pro/types/global';

const current = ref(0);
const icon = ref('checkmark');
const mode = ref<StepMode>('number');
const direction = ref<StepDirection>('row');
</script>

API ​

Steps Props ​

参数说明类型默认值可选值
mode设置模式Stringdotnumber
list步骤数据数组（具体见示例）Array[]-
current设置当前处于第几步Number | String0-
directionrow-横向，column-竖向Stringrowcolumn
active-color已完成步骤的激活颜色，如设置，type值会失效String--
un-active-color未激活的颜色，用于表示未完成步骤的颜色String#606266-
iconmode = number时的自定义图标Stringcheckmark-

Step Props v0.3.6+ ​

参数说明类型默认值可选值
mode设置模式Stringdotnumber
directionrow-横向，column-竖向Stringrowcolumn
active-color已完成步骤的激活颜色，如设置，type值会失效String--
un-active-color未激活的颜色，用于表示未完成步骤的颜色String#606266-
iconmode = number时的自定义图标Stringcheckmark-
name标题String--
desc描述String--

Step Slots v0.3.6+ ​

名称说明
icon自定义图标内容
name自定义标题内容
desc自定义描述内容