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

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

展示组件

步骤条 TmSteps

导航，步骤状态显示使用

🌶️ 示例

查看模拟效果－

示例模板

<!--
  - 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
☑️	☑️	☑️	☑️

🌱 参数

参数名	类型	默认值	描述
modelValue	number	-1	绑定值，数字
icon	string	'checkbox-blank-circle-line'	默认图标
activeIcon	string	'checkbox-circle-fill'	激活状态下的图标
iconSize	union	'28'	图标大小，可以是字符串或数字
labelSize	union	'26'	标签文本大小，可以是字符串或数字
descSize	union	'22'	描述文本大小，可以是字符串或数字
color	string	'#a6a6a6'	默认颜色
activeColor	string	''	激活状态下的颜色
vertical	boolean	false	是否垂直排列
reverse	boolean	false	是否反转排列顺序
disabled	boolean	true	是否禁用
showFooter	boolean	true	显示标题及辅助信息标签

🌹 事件

事件名	参数	返回数据	描述
change	名称：index,当前索引,	-	切换改变时触发
update:modelValue	-	-	等同v-model

🌽 slot插槽

插槽名	数据	描述
default	-	仅可放置子节点tm-steps-item,不可嵌套子节点。

🥗 ref方法

方法名	参数	返回值	描述
addChildren	-	-	-
removeChildren	-	-	-
updateCurrent	-	-	-
changeEmit	-	-	-