wqr-circleprocessbar v1.0.2

圆形进度条组件使用简介：

安装：npm i wqr-circleprocessbar -S/--save

安装：yarn add wqr-circleprocessbar -S/--save

使用：import circleProcessBar from 'wqr-circleprocessbar'

说明：

该组件为圆形进度条,单纯用来展示（使用场景就是圆形进度咯）

使用概览：

new Vue({
  el: '#body',
  data:{
        style: {
            color: '#66d555',                 //进度条颜色
            borderWidth: 6,                   //进度条宽度
            wrapWidthAndHeight: 100,          //进度条盒子宽高
        },
        percent:0
    },
  components:{
    circleProcessbar
  }
})

使用方法：

<circle-process-bar :percent="70" :process-style="style" :left-start="-135" :right-end="45" :is-bottom="false">
    <div class="progress">
        <span>剩余</span>
        <span>{{percent}}%</span>
    </div>
</circle-process-bar>

参数percent：表示进度条的进度，这是该组件的核心参数（Number类型，必传，默认值为0）

参数process-style：表示进度条的相关样式（Object类型，非必传，默认值如下）

如：
style: {
    color: 'green', 
    borderWidth: 5, 
    wrapWidthAndHeight: 80, 
}

//一般场景可不用考虑（碰到了特殊场景可联系组件提供者）
参数left-start：表示左侧进度的开始角度（因为这里的整个圆形进度是通过左右两半合起来的效果）。（非必传，Number类型，默认值为
-135）

//一般场景可不用考虑（碰到了特殊场景可联系组件提供者）
参数right-end：表示右侧进度的结束角度（因为这里的整个圆形进度是通过左右两半合起来的效果）。（非必传，Number类型，默认为45）

参数is-bottom：表示进度条从底部开始旋转还是从顶部开始旋转。（非必传，Boolean类型，默认为true,从底部开始旋转；false为从顶部
开始旋转）

标签： （替换组件中<slot></slot>标签中的内容，以便可以灵活展示进度）   
<div class="progress">
  <span>剩余</span>
  <span>{{percent}}%</span>
</div>

Demo:旋转的进度条

new Vue({
  el: '#body',
  data:{
        style: {
            color: '#66d555', 
            borderWidth: 6, 
            wrapWidthAndHeight: 100, 
        },
        percent:0
    },
    created() {
        this.go()
    },    
    methods: {
        go(){
            let timer=setInterval(()=>{   //动态改变进度条的进度，使其有旋转进度动态效果
                this.percent+=1
                if(this.percent==100){
                    clearInterval(timer)
                }
            },50)
        }
    },
  components:{
    circleProcessBar
  }
})

<circle-process-bar :percent="percent" :process-style="style" :is-bottom="false"></circle-process-bar>

效果如下：（如果demo效果图在npm不可见，请移步到GitHub上查看效果）

好了，到此结束，去完成你的圆形进度条吧！

AuthorProfile：

Mail：gcgleb22@163.com

Github：WangQiangrong 欢迎 Fork 并提出宝贵意见，赏个star再好不过了，哈哈！！

NPM：575201314