T-UVUE-UI1.0.0

Appearance

ProgressCircle 环形进度条 ​

环形进度条组件可以直观地展示进度百分比，适用于多种场景，如加载指示器、任务完成度展示等。

支持平台 ​

安卓iosweb微信小程序支付宝小程序QQ小程序
√√√xxx
vue
<template>
	<t-page title="环形进度条">
		<t-card title="ProgressCircle 环形进度条" class="mlrt.30" sub-title="环形进度条组件是一个可定制的UI组件，用于显示圆形进度指示，支持自定义线条宽度、颜色，并可显示进度百分比。"></t-card>
		<introduction title="操作">
			<t-button type="p" class="mb.15" @click="add">增加</t-button>
			<t-button type="e" @click="reduce">减少</t-button>
		</introduction>
		<introduction title="基础使用+主题展示" v-if="area==1">
			<t-row>
				<t-progress-circle v-model="progress" class="mr.15" type="e"></t-progress-circle>
				<t-progress-circle v-model="progress" class="mr.15" type="p"></t-progress-circle>
				<t-progress-circle v-model="progress" class="mr.15" type="s"></t-progress-circle>
				<t-progress-circle v-model="progress" class="mr.15" type="w"></t-progress-circle>
			</t-row>
		</introduction>
		<introduction title="设置大小背景颜色" v-if="area==2">
			<t-progress-circle v-model="progress" class="s.150" type="p" inactiveColor="#00aaff" activeColor="#ffaa00"
				lineWidth="20rpx"></t-progress-circle>
		</introduction>
		<introduction title="显示百分比" v-if="area==3">
			<t-progress-circle :showLabel="true" v-model="progress" type="p" inactiveColor="#ff5500"
				activeColor="#ff007f" lineWidth="10rpx" class="s.200"></t-progress-circle>
		</introduction>
		<t-row class='ffww-tdb-tdr-tdp-mltr.30'>
			<t-button type="p" class="mr.30-mb.30" size="small" @click="area=1">基础使用+主题展示</t-button>
			<t-button type="e" class="mr.30-mb.30" size="small" @click="area=2">设置大小背景颜色</t-button>
			<t-button type="s" class="mr.30-mb.30" size="small" @click="area=3">显示百分比</t-button>
		</t-row>
	</t-page>
</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>

Props ​

名称描述类型默认值
lineWidth进度条线条宽度String"20rpx"
inactiveColor进度条未激活时的颜色String"#ececec"
activeColor进度条激活时的颜色String""
modelValue进度条的当前值Number0
unit进度条值的单位String"%"
showLabel是否显示进度标签Booleanfalse
duration进度条过渡的持续时间，单位为毫秒Number300