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

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

反馈组件

进度条 TmProgress

通用进度条组件。

🌶️ 示例

查看模拟效果－

示例模板

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

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

const value = ref(10)
</script>

<template>
	<view>
		<tm-sheet>
			<tm-text font-size="32" class=" text-weight-b mb-16 d-block">进度条 tmProgress</tm-text>
			<tm-text color="#999999">
				配置灵活，自由度高。
			</tm-text>
		</tm-sheet>

		<tm-sheet>
			<tm-progress :model-value="50"></tm-progress>
		</tm-sheet>
		<tm-sheet>
			<tm-progress :model-value="50" color="error" size="18" show-label label-inside></tm-progress>
		</tm-sheet>

		<tm-sheet>
			<tm-text font-size="32" class=" text-weight-b d-block">受控及动画演示</tm-text>
			<tm-text color="#999999" class=" mb-n8 ">
				演示标签插槽，状态自定义，渐变，自定颜色等属性。
			</tm-text>
			<tm-progress v-model="value"></tm-progress>
			<tm-progress v-model="value" :color="value > 50 ? 'success' : 'primary'" class="mt-n8"
				show-label="true"></tm-progress>
			<tm-progress v-model="value" color="warn" size="12" class="mt-n8" show-label>
				<template v-slot:default="{ value, percentage }">
					<tm-icon color="success" v-if="percentage > 80" name="checkbox-circle-line"></tm-icon>
					<tm-icon color="warn" v-else name="close-circle-line"></tm-icon>
				</template>
			</tm-progress>
			<tm-progress v-model="value" linear-color="linear-gradient(to right, #FFEB3A 0%, #4DEF8E 100%)" size="12"
				class="mt-n8">
			</tm-progress>

			<view class="flex flex-row gap-10 mt-n8">
				<tm-tag @click="value = 10">10</tm-tag>
				<tm-tag @click="value = 50">50</tm-tag>
				<tm-tag @click="value = 100">100</tm-tag>
			</view>
		</tm-sheet>


	</view>

</template>

<style scoped></style>

🌶️ 兼容性

平台兼容

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

🌱 参数

参数名	类型	默认值	描述
modelValue	number	0	当前进度值
min	number	0	最小值
max	number	100	最大值
color	string	""	进度条颜色
linearColor	string	''	线性渐变颜色
bgColor	string	"info"	背景颜色
darkBgColor	string	""	暗黑模式背景颜色
showLabel	union	false	是否显示进度标签
labelColor	string	"#333"	标签文字颜色
labelFontSize	union	24	标签字体大小
size	union	8	进度条高度
round	union	8	圆角大小
duration	number	250	动画持续时间（毫秒）
labelInside	union	false	标签显示在进度条内部

🌹 事件

事件名	参数	返回数据	描述
update:modelValue	-	-	等同v-model

🌽 slot插槽

插槽名	数据	描述
default	名称：binding,percentage 类型：-
名称：binding,value 类型：-
标签插槽

🥗 ref方法

方法名	参数	返回值	描述