Wot Design Uni 组件库上新 Circle 环形进度条，快来看看吧！

​

Circle 环形进度条

圆环形的进度条组件，支持进度渐变动画。

地址

Github
文档网站
插件市场

基础用法

通过v-model表示进度条的当前进度，text属性控制进度条中间文字内容。

<wd-circle v-model="current" :text="`进度：${current}%`"></wd-circle>

const current = ref<number>(10)

宽度控制

通过strokeWidth属性来控制进度条宽度，默认10px。

<wd-circle v-model="current" :strokeWidth="15"></wd-circle>

颜色定制

通过color属性控制进度条颜色，默认#1C64FD，通过layerColor属性控制进度条轨道颜色，默认#EBEEF5。

<wd-circle v-model="current" color="#1C64FD" layer-color="#EBEEF5"></wd-circle>

渐变色

color属性支持传入对象格式来定义渐变色。

<wd-circle v-model="current" :color="gradientColor"></wd-circle>

const gradientColor = {
  '0%': '#ffd01e',
  '100%': '#ee0a24'
}

进度条展开方向

通过clockwise属性控制进度条展开方向，clockwise为false时，进度会从逆时针方向开始。

<wd-circle v-model="current" :clockwise="false"></wd-circle>

大小定制

通过size属性控制进度条圆环直径，默认100px。

<wd-circle v-model="current" :size="300"></wd-circle>

组件效果

Attributes

参数	说明	类型	可选值	默认值	最低版本
v-model |modelValue	当前进度	number	-	0	0.1.19
customClass	自定义class	string	-	-	0.1.19
customStyle	自定义style	string	-	-	0.1.19
rate	目标进度	number | string	-	100	0.1.19
size	圆环直径，默认单位为 px	number	-	100	0.1.19
color	进度条颜色	string | Record<string, string>	-	#4d80f0	0.1.19
layerColor	轨道颜色	string	-	#EBEEF5	0.1.19
fill	填充颜色	string	-	#ffffff	0.1.19
speed	动画速度（单位为 rate/s）	number	-	50	0.1.19
text	文字	string	-	-	0.1.19
strokeWidth	进度条宽度，单位px	number	-	10	0.1.19
strokeLinecap	进度条端点的形状	string	butt | round | square	round	0.1.19
clockwise	是否顺时针增加	boolean	-	true	0.1.19

结语

目前Wot Design Uni组件库还在完善中，同时也期待有兴趣的小伙伴参与到组件库的建设中，近期的计划可见【重点】接下来要做的事 .

​