Circle 环形进度条

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

基础用法

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

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

const current = ref<number>(10)

宽度控制

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

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

颜色定制

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

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

渐变色

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

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

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

进度条展开方向

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

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

大小定制

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

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

Attributes

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

Circle 外部样式类

类名	说明	最低版本
custom-class	根节点样式	-

源代码

文档

• 组件