upCircle 环形进度条

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

使用方法

安装@upday/upcircle

npm i @upday/upcircle

在文件中引入@upday/upcircle

import upCircle from '@upday/upcircle';

基础用法

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

显示文案

文案样式可自定义

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

渐变颜色

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

进度动画

<up-circle :percent="100"  strokeColor="#3cbd3c" :radius="50" :strokeWidth="12" :trailWidth="10" :duration="1000" @progress="changeShow">
    <span style="font-size:24px">{{show}}%</span>
</up-circle>
<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