组件库文档 tmui.design

进度条 Progress

进度条，圆形进度条，在不同的平台使用2d或者webgl方法，使得性能更加强劲。NVUE中貌似是uniapp的插件bug无法实现渐变绘制。Nvue中需要在manifest.json中设置canvas模块，才能打包详见：https://github.com/dcloudio/NvueCanvasDemo。

🌶️ 进度条 Progress 示例

查看模拟效果＋

示例模板

vue

<template>
	<tm-app>
		<tm-sheet>
			<tm-text :fontSize="24" _class="text-weight-b" label="基础属性,更多玩法请前往文档。"></tm-text>
			<tm-divider></tm-divider>
			<tm-progress :width="636" v-model:percent="percent"></tm-progress>
			<view class="py-12"></view>
			<tm-progress linear="right" :width="636" color="red" v-model:percent="percent"></tm-progress>
			<view class="py-12"></view>
			<tm-progress linear="right" showBar :width="636" color="orange" v-model:percent="percent"></tm-progress>
		</tm-sheet>
		<tm-sheet>
			<tm-text :fontSize="24" _class="text-weight-b" label="圆形，以及镜像"></tm-text>
			<tm-divider></tm-divider>
			<view class="flex flex-row">
				<tm-progress model="circle" bgColor="grey-4" :height="24" :width="200" v-model:percent="percent"></tm-progress>
				<view class="py-12"></view>
				<tm-progress
					linear="left"
					linear-deep="accent"
					color="cyan"
					model="circle"
					semicircleFlip
					bgColor="grey-4"
					:height="24"
					:width="200"
					v-model:percent="percent"
				></tm-progress>
				<view class="py-12"></view>
			</view>
		</tm-sheet>
		<tm-sheet>
			<tm-text :fontSize="24" _class="text-weight-b" label="半圆形，以及镜像"></tm-text>
			<tm-divider></tm-divider>
			<view class="flex flex-row">
				<tm-progress
					model="circle"
					color="pink"
					linear="left"
					linear-deep="accent"
					semicircle
					:height="24"
					:width="200"
					v-model:percent="percent"
				></tm-progress>
				<view class="py-12"></view>

				<tm-progress
					model="circle"
					linear="left"
					semicircle
					semicircleFlip
					:height="24"
					color="cyan"
					linear-deep="accent"
					:width="200"
					v-model:percent="percent"
				>
				</tm-progress>
				<view class="py-12"></view>
			</view>
		</tm-sheet>
		<tm-sheet>
			<tm-text :fontSize="24" _class="text-weight-b" label="进度操作"></tm-text>
			<tm-divider></tm-divider>
			<view class="flex flex-row">
				<tm-button @click="percent = percent >= 100 ? 0 : percent + 10" label="增加"></tm-button>
				<view class="px-12"></view>
				<tm-button color="red" @click="percent = percent <= 0 ? 0 : percent - 10" label="减少"></tm-button>
			</view>
		</tm-sheet>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmProgress from '@/tmui/components/tm-progress/tm-progress.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
import tmButton from '@/tmui/components/tm-button/tm-button.vue'
const percent = ref(50)
</script>

🌶️ 兼容性

APP-VUE	APP-NVUE	小程序	WEB/H5	VUE3/TS
✔️	✔️	✔️	✔️	✔️

🌱 参数

本组件含有公共属性公共属性

参数名	类型	默认值	描述
model	String	line	模式：直线形、环形;可选值：line,circle
semicircle	[Boolean,String]	false	是否半圆;可选值：false,true,注意：model==circle有效
semicircleFlip	[Boolean,String]	false	是否反转；半圆正常是在上方，如果反转就在下方；注意：model==circle有效
fontSize	[Number,String]	28	字体大小，注意：model==circle有效
percent	Number	0	进度百分比数值，不带%号，也可以使用v-model:percent
percentSuffix	String	%	数值后缀，默认为%
width	Number	120	宽度，单位rpx
height	Number	6	高度，单位rpx
bgColor	String	grey-3	背景颜色
color	String	primary	颜色
followTheme	[Boolean,String]	true	是否跟随主题，可选值：false,true
dark	[Boolean]	false	黑暗模式，可选值：false,true
linear	[String]	无	直线形图表开始结束方向，left:右->左，right:左->右。top:下->上，bottom:上->下
linearDeep	[String]	light	light,dark,accent亮系渐变和深色渐变
round	[Number,String]	3	直线线条圆角
showBar	[Boolean,String]	false	显示数值点
disabled	Boolean	false	是否禁用

🌹 事件

事件名	参数	返回数据	描述
update:percent	进度值	number	进度值变化时触发
change	进度值	number	进度值变化时触发

🌽 slot插槽

title,圆形进度条时中间的文字插槽。

🥗 ref方法

无

方法名	参数	返回值	描述

💏 文档贡献

此页文档由ygy贡献(git,github)，如果对该框架感兴趣的可以参与我们一同进步！

组件库文档 tmui.design ​

进度条 Progress ​

🌶️ 进度条 Progress 示例 ​

🌶️ 兼容性 ​

🌱 参数 ​

🌹 事件 ​

🌽 slot插槽 ​

🥗 ref方法 ​

💏 文档贡献 ​