Circle 环形进度条

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

代码演示

基础用法

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

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

export default {
  data() {
    return {
      current: 10
    }
  }
}

宽度控制

通过strokeWidth属性来控制进度条宽度，默认20，单位rpx。

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

颜色定制

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

<hd-circle v-model="current" color="#1C64FD" layerColor="#EBEEF5"></hd-circle>

渐变色

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

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

export default {
  data() {
    return {
      gradientColor: {
        '0%': '#ffd01e',
        '100%': '#ee0a24',
      }
    }
  }
}

进度条展开方向

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

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

大小定制

通过size属性控制进度条圆环直径，默认200，单位rpx。

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

Props

Name	Description	Type	Required	Default
value	当前进度	Number	false	0
rate	目标进度	Number / String	false	100
size	圆环直径，默认单位为 rpx	String / Number	false	200
color	进度条颜色，传入对象格式可以定义渐变色	String / Object	false	#1C64FD
layerColor	轨道颜色	String	false	#EBEEF5
fill	填充颜色	String	false	#ffffff
speed	动画速度（单位为 rate/s）	Number	false	50
text	文字	String	false	-
strokeWidth	进度条宽度 单位rpx	Number	false	20
strokeLinecap	进度条端点的形状，可选值为 "butt"	"round"	"square"	'butt' / 'round' / 'square'
clockwise	是否顺时针增加	Boolean	false	false

Slots

Name	Description	Default Slot Content
default	自定义提示内容	-