@duoduo-cat/updaycircle v1.0.2

ProgressLoop 环形进度条

以环形方式展示进度完成情况

使用方法

安装@upday/updaycircle

npm i @upday/updaycircle

在文件中引入@upday/updaycircle

import updaycircle from '@upday/updaycircle';

基础用法

<updaycircle :percent="30"  lineColor="#3cbd3c" :radius="50" :lineWidth="12" :bgWidth="10"></updaycircle>

显示文案

文案样式可自定义

<updaycircle :percent="50" >
    <span style="font-size:24px">50%</span>
</updaycircle>

渐变颜色

进度动画

<updaycircle :percent="100"  lineColor="#3cbd3c" :radius="50" :lineWidth="12" :bgWidth="10" :duration="1000" @progress="changeText">
    <span style="font-size:24px">{{text}}%</span>
</updaycircle>
<script>
export default {
    data(){
        return{
            text:0
        }
    },
    methods:{
        changeText(rate) {
            this.text = Math.ceil(rate);
        }
    }
}
</script>

Prop