# t-progress-circle

ProgressCircle 圆形进度

t-progress-circle 组件介绍

环形进度条组件是一个可定制的UI组件，用于显示圆形进度指示，支持自定义线条宽度、颜色，并可显示进度百分比。

t-progress-circle 平台兼容

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

t-progress-circle 基础用法

基础用法参考 demo/circle/circle.uvue，通过 v-model 双向绑定进度值，支持主题、尺寸与颜色配置。

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-card title="ProgressCircle 环形进度条"
				class="mlrt-15"
				sub-title="环形进度条组件是一个可定制的UI组件，用于显示圆形进度指示，支持自定义线条宽度、颜色，并可显示进度百分比。"></t-card>
		<introduction title="操作">
			<t-button type="primary"
					  class="mb-7"
					  @click="add">增加</t-button>
			<t-button type="error"
					  @click="reduce">减少</t-button>
		</introduction>
		<introduction title="基础使用+主题展示"
					  v-if="area==1">
			<t-row>
				<t-progress-circle :class="[`mb-15 twh-75 mr-10`]"
								   v-model="progress"
								   type="error"></t-progress-circle>
				<t-progress-circle class="mb-15 twh-75 mr-10"
								   v-model="progress"
								   type="primary"></t-progress-circle>
				<t-progress-circle class="mb-15 twh-75 mr-10"
								   v-model="progress"
								   type="success"></t-progress-circle>
				<t-progress-circle class="mb-15 twh-75 mr-10"
								   v-model="progress"
								   type="warning"></t-progress-circle>
			</t-row>
		</introduction>
		<introduction title="设置大小背景颜色"
					  v-if="area==2">
			<t-progress-circle v-model="progress"
							   class="twh-100"
							   type="primary"
							   inactiveColor="#00aaff"
							   activeColor="#ffaa00"></t-progress-circle>
		</introduction>
		<introduction title="显示百分比"
					  v-if="area==3">
			<t-progress-circle :showLabel="true" class="twh-100"
							   v-model="progress"
							   type="primary"
							   inactiveColor="#ff5500"
							   activeColor="#ff007f"></t-progress-circle>
		</introduction>
		<t-row class='fww tdb tdr tdp mltr-15'>
			<t-button type="primary"
					  class="mrb-15"
					  size="small"
					  @click="area=1">基础使用+主题展示</t-button>
			<t-button type="error"
					  class="mrb-15"
					  size="small"
					  @click="area=2">设置大小背景颜色</t-button>
			<t-button type="success"
					  class="mrb-15"
					  size="small"
					  @click="area=3">显示百分比</t-button>
		</t-row>
	</view>
</template>
<script setup>
	const area = ref(1)
	const progress = ref(55)
	function add() {
		let p = progress.value + 10
		if (p > 100) p = 100
		progress.value = p

	}
	function reduce() {
		let p = progress.value - 10
		if (p < 0) p = 0
		progress.value = p
	}
</script>

t-progress-circle Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	"primary"	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
backgroundLineWidth	String	"20rpx"	背景圈线条宽度	-
activeLineWidth	String	"20rpx"	进度圈线条宽度	-
inactiveColor	String	"#ececec"	进度条未激活时的颜色	-
activeColor	String	""	进度条激活时的颜色	-
modelValue	Number	0	双向绑定的值	0-100
unit	String	"%"	进度条值的单位	-
showLabel	Boolean	false	是否显示进度标签	true, false
duration	Number	300	进度条过渡的持续时间，单位为毫秒	-

t-progress-circle Events

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