Skip to content

Circle 环形进度条 0.1.19

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

基础用法

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

html
<wd-circle v-model="current" :text="`进度:${current}%`"></wd-circle>
ts
const current = ref<number>(10)

宽度控制

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

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

颜色定制

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

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

渐变色

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

html
<wd-circle v-model="current" :color="gradientColor"></wd-circle>
ts
const gradientColor = {
  '0%': '#ffd01e',
  '100%': '#ee0a24'
}

进度条展开方向

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

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

大小定制

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

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

Attributes

参数说明类型可选值默认值最低版本
v-model |modelValue当前进度number-00.1.19
customClass自定义classstring--0.1.19
customStyle自定义stylestring--0.1.19
size圆环直径,默认单位为 pxnumber-1000.1.19
color进度条颜色string | Record<string, string>-#4d80f00.1.19
layerColor轨道颜色string-#EBEEF50.1.19
fill填充颜色string-#ffffff0.1.19
speed动画速度(单位为 rate/s)number-500.1.19
text文字string--0.1.19
strokeWidth进度条宽度,单位pxnumber-100.1.19
strokeLinecap进度条端点的形状stringbutt | round | squareround0.1.19
clockwise是否顺时针增加boolean-true0.1.19

Circle 外部样式类

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

Released under the MIT License.

Released under the MIT License.