# t-steps

Steps 步骤条

t-steps 组件介绍

t-steps 用于展示操作流程的步骤进度，引导用户按步骤完成任务。支持横向和纵向布局，支持内容自适应和子组件样式主题覆盖父组件样式主题。

t-steps 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-steps 基础用法

基础用法参考 demo/steps/steps.uvue，配合 t-steps-item 子组件使用。

<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 Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
direction	布局方向，可选 horizontal、vertical	string	'horizontal'
current	当前步骤索引（从1开始）	number	2
activeColor	激活状态文字颜色	string	''
activeIcon	激活状态图标名称	string	'checkbox-mark'
activeIconClass	激活图标的样式类	string	''
barClass	步骤条的样式类	string	''
indexClass	步骤索引的样式类	string	''
inactiveColor	未激活状态文字颜色	string	'#dedede'
showIndex	是否显示序号	boolean	true
isEvenlyDistributed	是否每项均匀分布	boolean	false

t-steps Events

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

t-steps Slots

插槽名	说明
default	步骤条内容，放置 t-steps-item 子组件

外部类

类名	说明
active-icon-class	激活图标样式类
bar-class	步骤条样式类
index-class	步骤索引样式类