@upday/upcircle v1.1.1

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

相关命令

npm publish --access public

 npm unpublish  xxxx  --force   

关于作者

微信：qq805599