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

结语

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