你当前查看的文档是tmui3.2.0（已不再支持NVUE）

[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

展示组件

步骤条子组件 TmStepsItem

仅可放置在父组件tm-steps中作为直接子节点使用。

🌶️ 示例

查看模拟效果－

示例模板

<!--
  - Copyright (c) 2025. tmzdy by @https://tmui.design
  -->

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

const current = ref(3)
const  onChange = (index:number)=>{
	console.log(index)
}
</script>

<template>
	<tm-sheet>
		<tm-text class=" text-weight-b  d-block" font-size="32">步骤条 tmSteps</tm-text>
		<tm-text color="#999999">
			子组件独立，方便灵活自定义。
		</tm-text>
	</tm-sheet>

	<tm-sheet>
		<tm-text class=" text-weight-b mb-n8 d-block" font-size="32">隐藏标签</tm-text>
		<tm-steps :model-value="2" :show-footer="false">
			<tm-steps-item v-for="item in 5" :key="item"></tm-steps-item>
		</tm-steps>
	</tm-sheet>
	<tm-sheet>
		<tm-text class=" text-weight-b mb-n8 d-block" font-size="32">完全自定义状态</tm-text>
		<tm-steps :model-value="1" :show-footer="false" icon-size="36">
			<tm-steps-item v-for="item in 5" :key="item">
				<template v-slot:icon="{active}" >
					<tm-sheet
						:color="active?'primary':'#f5f5f5'"
						class="flex flex-center" height="100%" margin="0" padding="0" round="50%" width="100%">
						<tm-text :color="active?'#fff':'#888'" fontSize="22" >{{item}}</tm-text>
					</tm-sheet>
				</template>
			</tm-steps-item>
		</tm-steps>
	</tm-sheet>
	<tm-sheet>
		<tm-text class=" text-weight-b  d-block" font-size="32">显示标签</tm-text>
		<tm-text class="mb-n8" color="#999999">
			自定状态及进度。并允许点击交互改变进度。
		</tm-text>
		<tm-steps v-model="current" :disabled="false">
			<tm-steps-item>注册帐号</tm-steps-item>
			<tm-steps-item >审核</tm-steps-item>
			<tm-steps-item active-color="error" active-icon="user-unfollow-line">发放牌证</tm-steps-item>
			<tm-steps-item active-color="error" active-icon="close-circle-line">结算</tm-steps-item>
		</tm-steps>
	</tm-sheet>

	<tm-sheet>
		<tm-text class=" text-weight-b  d-block" font-size="32">显示标签</tm-text>
		<tm-text class="mb-n8" color="#999999">
			自定状态及进度。并允许点击交互改变进度。
		</tm-text>
		<tm-steps v-model="current" :disabled="false" :reverse="true" :vertical="true" @change="onChange">
			<tm-steps-item>注册帐号</tm-steps-item>
			<tm-steps-item >
				<template v-slot:default="{active}">
					<tm-sheet :color="active?'primary':'#fff'" :margin="[0,0,0,16]" shadow="20">
						<tm-text :color="active?'#fff':''">自定义布局外观</tm-text>
					</tm-sheet>
				</template>
			</tm-steps-item>
			<tm-steps-item active-color="error" active-icon="user-unfollow-line" desc="发放失败，资料不齐全，请重新提交资料">发放牌证</tm-steps-item>
			<tm-steps-item active-color="error" active-icon="close-circle-line" desc="无法结算">结算</tm-steps-item>
		</tm-steps>
	</tm-sheet>
</template>

<style scoped>

</style>

🌶️ 兼容性

平台兼容

H5	uniAPP	小程序	version
☑️	☑️	☑️	☑️

🌱 参数

参数名	类型	默认值	描述
icon	string	''	默认图标
activeIcon	string	''	激活状态下的图标
iconSize	union	''	图标大小，可以是字符串或数字
labelSize	union	''	标签文本大小，可以是字符串或数字
descSize	union	''	描述文本大小，可以是字符串或数字
color	string	''	默认颜色
activeColor	string	''	激活状态下的颜色
label	string	''	标题
desc	string	''	辅助信息
disabled	-	false	-

🌹 事件

事件名	参数	返回数据	描述
click	名称：index,当前索引,	-	项目被点击

🌽 slot插槽

插槽名	数据	描述
icon	名称：binding,active 类型：boolean
图标插槽
default	名称：binding,active 类型：boolean
默认标题插槽
desc	名称：binding,active 类型：boolean
辅助信息标签

🥗 ref方法

方法名	参数	返回值	描述