更新记录

1.0.2（2024-07-05） 下载此版本

修复圆环首尾有间隙的问题

1.0.1（2024-07-05） 下载此版本

修复文挡错误

1.0.0（2024-07-05） 下载此版本

新增

平台兼容性

uni-app

hbxw-circular-progress组件

介绍

一个高度可定制的圆环进度条组件

使用示例

<template>
    <view class="test-container">
        <hbxw-circular-progress :value="progress" />
        <hbxw-circular-progress 
            :value="progress" 
            progressColor="green" 
            progressWidth="30rpx" 
            radius="200rpx"
        />
        <hbxw-circular-progress 
            :value="progress"
             @click="progressClick"
            :textStyle="{fontSize: '40px',fontWeight: 'bold',color: blue,backgroundColor: '#000'}"
        />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                progress: 0
            }
        },
        mounted() {
            setInterval(() => {
                if (this.progress === 100) {
                    this.progress = 0
                }
                this.progress += 1;
            }, 100)
        },
        methods: {
            progressClick(val) {
                console.log('---- progressClick ----:', val)
            }
        }
    }
</script>

<style>
.test-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>

API

Props

Events