@upday/updaycircle

ProgressLoop 环形进度条

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

使用方法

安装@upday/updaycircle

npm i @upday/updaycircle

在文件中引入@upday/updaycircle

import updaycircle from '@upday/updaycircle';

基础用法

<updaycircle :percent="30"  strokeColor="#3cbd3c" :radius="50" :strokeWidth="12" :trailWidth="10"></updaycircle>

显示文案

文案样式可自定义

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

渐变颜色

<circle :percent="80"    strokeColor="['#e52c5c','#ab5aea']" >
    <span style="font-size:24px">80%</span>
</circle>

进度动画

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

Prop

字段	说明	类型	默认值
percent	进度条位置百分比（0-100）	Number	0
strokeWidth	高亮的进度线宽度（单位px）	Number	6
strokeColor	高亮的进度线颜色	String/Array	#8e71c7
strokeLinecap	环形路径两端的形状（可选值：butt/round/square）	String	round
radius	圆形的半径（单位px）	Number	100
trailWidth	环形线的宽度（单位px）	Number	6
trailColor	环形线的底色	String	#ddd

| duration | 进度动画持续时长 | Number | 0

相关命令

npm publish --access public

 npm unpublish  xxxx  --force   

关于作者

微信：qq805599