更新记录

0.0.3（2023-06-06）

优化文档

0.0.2（2023-06-04）

将公共依赖提取至hd-utils

0.0.1（2023-06-02）

基于Vue3和TypeScript开发的uni-app 圆环形的进度条组件，支持进度渐变动画。

平台兼容性

组件库官方文档：fant-mini-plus

组件库提供更多vue3组件，比单独引入更加强大

Circle 环形进度条

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

代码演示

基础用法

通过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>

Props

Slots

联系方式

有不明白或者建议可以扫码交流

联系我们