You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1.2 KiB
1.2 KiB
代码演示
基础用法
通过v-model表示进度条的当前进度，text属性控制进度条中间文字内容。
<hd-circle v-model="current" :text="`进度：${current}%`"></hd-circle>
const current = ref<number>(10)
宽度控制
通过strokeWidth属性来控制进度条宽度，默认20rpx。
<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>
const gradientColor = {
'0%': '#ffd01e',
'100%': '#ee0a24'
}
进度条展开方向
通过clockwise属性控制进度条展开方向，clockwise为false时，进度会从逆时针方向开始。
<hd-circle v-model="current" :clockwise="false"></hd-circle>
大小定制
通过size属性控制进度条圆环直径，默认200rpx。
<hd-circle v-model="current" size="300"></hd-circle>