Tui Plus Vapor

Appearance

# t-steps-item

StepsItem 步骤项

t-steps-item 组件介绍 ​

t-steps-item 是 t-steps 的子组件，用于定义单个步骤的内容，包括标题、时间、描述等信息。支持自定义样式和图标。

t-steps-item 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-steps-item 基础用法 ​

配合 t-steps 组件使用，参考 demo/steps/steps.uvue。

vue
<template>
	<view class='p-15'>
		<tui-theme-switch></tui-theme-switch>
		<t-card class="r-10 mb-15"
				title="Steps 步骤条"
				sub-title="展示操作流程的步骤进度，引导用户按步骤完成任务"></t-card>
		
		<t-button type='primary'
				  class="mb-15"
				  @click="simulateNext">模拟推进订单状态</t-button>

		<t-section class="mb-15 r-10"
				   title='快递物流追踪'
				   type='success'></t-section>
		<t-steps :class="[`r-10 mb-15 tvg`]"
				 type="primary"
				 :current="expressIndex">
			<t-steps-item v-for="(item, index) in expressList"
						  :key="index"
						  :title="item.title"
						  :time="item.time"
						  :desc="item.desc"
						  :type="item.status === 'error' ? 'error' : ''"
						  :activeIcon="item.status === 'error' ? 'close' : ''">
			</t-steps-item>
		</t-steps>

		<t-section class="mb-15 r-10"
				   title='订单状态流转-固定宽度'
				   type='error'></t-section>
		<t-steps :class="[`r-10 mb-15 tvg`]"
				 :current="orderIndex"
				 type="warning"
				 :isEvenlyDistributed="true">
			<t-steps-item v-for="(item, index) in orderList"
						  :key="index"
						  :title="item.title"
						  :time="item.time"
						  :desc="item.desc">
			</t-steps-item>
		</t-steps>

		<t-section class="mb-15 r-10"
				   title='售后进度'
				   type='error'></t-section>
		<t-steps :class="[`r-10 mb-15 tvg`]"
				 :current="afterSaleIndex"
				 type="success"
				 direction="vertical">
			<t-steps-item v-for="(item, index) in afterSaleList"
						  :key="index"
						  :title="item.title"
						  :time="item.time"
						  :desc="item.desc">
			</t-steps-item>
		</t-steps>

		<t-section class="mb-15 r-10"
				   title='入驻审核流程-固定高度'
				   type='error'></t-section>
		<t-steps :class="[`r-10 mb-15 tvg h-420`]"
				 :current="auditIndex"
				 type="primary"
				 direction="vertical"
				 :isEvenlyDistributed="true">
			<t-steps-item v-for="(item, index) in auditList"
						  :key="index"
						  :title="item.title"
						  :time="item.time"
						  :desc="item.desc"
						  :type="item.status === 'error' ? 'error' : ''"
						  :activeIcon="item.status === 'error' ? 'close' : ''">
			</t-steps-item>
		</t-steps>
	</view>
</template>

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

	// 步骤项节点状态枚举
	type StepNodeStatus = 'done' | 'active' | 'wait' | 'error'

	// 步骤项数据定义
	type StepItemData = {
		title : string      // 步骤标题
		time : string       // 时间文本
		desc : string       // 描述文本
		status : StepNodeStatus // 节点状态
	}

	// ========== 模拟数据 ==========

	// 1. 快递物流追踪（含异常节点）
	const expressIndex = ref<number>(3)
	const expressList = ref<StepItemData[]>([
		{ title: '商家已发货', time: '06-15 09:10', desc: '商家已将包裹交付给快递公司', status: 'done' },
		{ title: '运输中', time: '06-15 14:30', desc: '包裹已到达杭州转运中心', status: 'done' },
		{ title: '派送异常', time: '06-16 08:00', desc: '联系不上收件人，暂存于驿站', status: 'error' },
		{ title: '重新派送', time: '06-16 15:20', desc: '快递员正在派送中', status: 'active' },
		{ title: '已签收', time: '', desc: '等待确认', status: 'wait' }
	])

	// 2. 订单基础状态流转
	const orderIndex = ref<number>(2)
	const orderList = ref<StepItemData[]>([
		{ title: '提交订单', time: '06-14 20:30', desc: '', status: 'done' },
		{ title: '支付成功', time: '06-14 20:31', desc: '', status: 'done' },
		{ title: '已发货', time: '', desc: '', status: 'wait' }
	])

	// 3. 售后进度（纯时间轴）
	const afterSaleIndex = ref<number>(2)
	const afterSaleList = ref<StepItemData[]>([
		{ title: '提交退款申请', time: '06-10 11:20', desc: '退款原因：七天无理由退款', status: 'done' },
		{ title: '商家审核中', time: '06-10 15:00', desc: '商家正在处理您的退款请求', status: 'done' },
		{ title: '商家同意退款', time: '06-11 09:30', desc: '退款将原路返回至微信钱包', status: 'active' },
		{ title: '退款到账', time: '', desc: '预计1-3个工作日内到账', status: 'wait' }
	])

	// 4. 商家入驻审核（含驳回节点）
	const auditIndex = ref<number>(3)
	const auditList = ref<StepItemData[]>([
		{ title: '提交入驻资料', time: '05-20 10:00', desc: '已提交营业执照及法人信息', status: 'done' },
		{ title: '平台初审驳回', time: '05-21 14:00', desc: '驳回原因：营业执照图片模糊', status: 'error' },
		{ title: '重新提交资料', time: '05-22 09:30', desc: '已更新高清资质图片并提交', status: 'done' },
		{ title: '平台复审通过', time: '05-23 11:00', desc: '资质审核通过，进入签约流程', status: 'active' },
		{ title: '缴纳保证金', time: '', desc: '请缴纳平台保证金以完成入驻', status: 'wait' }
	])

	// ========== 交互逻辑 ==========
	
	const simulateNext = () : void => {
		// 快递物流推进
		if (expressIndex.value < expressList.value.length - 1) {
			expressIndex.value++
		} else {
			expressIndex.value = 0
			expressList.value[2].status = 'error' // 归零时恢复异常状态标识
		}

		// 订单状态推进
		if (orderIndex.value < orderList.value.length - 1) {
			orderIndex.value++
		} else {
			orderIndex.value = 0
		}

		// 售后进度推进
		if (afterSaleIndex.value < afterSaleList.value.length - 1) {
			afterSaleIndex.value++
		} else {
			afterSaleIndex.value = 0
		}

		// 入驻审核推进
		if (auditIndex.value < auditList.value.length - 1) {
			auditIndex.value++
		} else {
			auditIndex.value = 0
		}
	}
</script>

t-steps-item Props ​

属性名说明类型默认值
path点击组件后跳转的页面路径；为空时仅响应事件string''
hover是否启用点击效果booleanfalse
type组件主题类型，可选 info、primary、error、warning、successstring''
disabled是否禁用booleanfalse
effect组件显示主题，可选 normal、dark、light、plainstring'normal'
size组件尺寸，可选 large、medium、small、ministring'medium'
title标题文本string''
time时间文本string''
desc描述文本string''
titleClass标题文本样式类string''
timeClass时间文本样式类string''
descClass描述文字样式类string''
activeColor激活状态文字颜色string''
inactiveColor未激活状态文字颜色string''
activeIcon激活状态的图标string''
activeIconClass激活状态图标的样式类string''
barClass步骤条样式类string''
showIndex是否显示序号booleantrue
isEvenlyDistributed是否均匀分布booleanfalse

t-steps-item Events ​

事件名说明回调参数
click点击时触发-
transitionend动画结束时触发-
initFinished组件初始化完成时触发-
touchstart触摸开始时触发-
touchend触摸结束时触发-
touchmove触摸移动时触发-
touchcancel触摸取消时触发-

t-steps-item Slots ​

插槽名说明
default自定义内容区域

外部类 ​

类名说明
title-class标题样式类
time-class时间样式类
desc-class描述样式类
active-icon-class激活图标样式类
bar-class步骤条样式类