展示操作或任务的当前进度，比如上传文件，是一个圆形的进度环。支持动态增加和减少进度值。

基础使用

通过 value 属性设置进度百分比，默认从 12 点钟方向开始绘制。

<un-circle-progress :value="percentage">
	{{ percentage }}%
</un-circle-progress>

尺寸与边框

使用 size 属性设置圆环大小，stroke-width 属性设置边框宽度。

<un-circle-progress :value="percentage" :size="60" :stroke-width="5">
	{{ percentage }}%
</un-circle-progress>

逆时针绘制

设置 clockwise 为 false 可以实现逆时针绘制。

<un-circle-progress :value="percentage" :clockwise="false">
	{{ percentage }}%
</un-circle-progress>

自定义颜色

通过 active-color 和 inactive-color 属性自定义进度环的颜色。

<un-circle-progress :value="percentage" active-color="#ff6b6b" inactive-color="#ffe0e0"></un-circle-progress>

背景颜色

使用 bg-color 属性设置圆环内部的背景颜色。

<un-circle-progress :value="percentage" bg-color="#f0f0f0">
	{{ percentage }}%
</un-circle-progress>

交互控制

可以通过外部事件动态控制进度值。

<un-circle-progress :value="percentage">
	{{ percentage }}%
</un-circle-progress>

<view @click="handleClick('plus')">增加</view>
<view @click="handleClick('minus')">减少</view>

<script setup>
import { ref } from 'vue'
import { range } from '@/uni_modules/uview-unix'

const percentage = ref(50)

const handleClick = (type) => {
	if(type == 'plus') {
		percentage.value = range(0, 100, percentage.value + 10)
	} else {
		percentage.value = range(0, 100, percentage.value - 10)
	}
}
</script>

API

Props

参数	说明	类型	默认值
value	圆环进度百分比值，为数值类型，0-100	number	0
inactive-color	圆环的底色	string	#ececec
active-color	圆环激活部分的颜色	string	#19be6b
size	整个圆环组件的宽度，高度默认等于宽度值，单位 rpx	number	200
stroke-width	圆环的边框宽度，单位 rpx	number	14
max	进度的最大值	number	100
clockwise	是否顺时针方向绘制	boolean	true
duration	进度变化的动画时长，单位 ms	number	500
start-angle	圆环开始绘制的角度，单位弧度	number	-π/2
type	如设置，active-color值将会失效	Enum	-
bg-color	圆环内部背景颜色	string	null

Slots

名称	说明	参数
default	圆环内部内容	-