Vue实现环形进度条方法组件

为什么80%的码农都做不了架构师？>>>   

<template>
<div class="wrap">
<div class="circle" v-bind:class="{ 'clip-auto': isActive.circle }">
<div class="percent left" ref='left' v-bind:style="{
'-webkit-transform':'rotate('+(18/5)*InitialVal+'deg)',
'-ms-transform':'rotate('+(18/5)*InitialVal+'deg)',
'-moz-transform':'rotate('+(18/5)*InitialVal+'deg)',
'transform':'rotate('+(18/5)*InitialVal+'deg)'
}"></div>
<div class="percent right" v-bind:class="{'wth0': isActive.right }"></div>
</div>
<div class="num">{{InitialVal }}</div>
<div class="ring-title">
<h3>{{datas.title}}</h3>
<p class="ellipsis">{{datas.description}}</p>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg : 'ring',
InitialVal : 0,
isActive : {
circle : false,
right : true
}
}
},

props:{
'datas':Object,
// 'sum':Number,
// 'titles':String,
// 'description':String,
},
methods:{
},
mounted(){//挂载结束调用的函数
var percent = 0
var sum = this.datas.sum;
var _this = this;
var loading=setInterval(function(){
if(percent == sum){
clearTimeout(loading);
}
if(percent>50){
_this.isActive.right = false;
_this.isActive.circle = true;
}
_this.InitialVal = percent;
percent++;
},10);
}

}
</script>

<style lang='scss' scoped>

    *{
        margin: 0;
        padding: 0;
    }
    .wrap,.circle,.percent{
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }
    .wrap{
        position: relative;
        top:50px;
        left:50px;
        display: inline-block;
        background-color: #ccc;
    }
    .circle{
        box-sizing: border-box;
        border:20px solid #ccc;
        clip:rect(0,100px,100px,50px);
    }
    .clip-auto{
        clip:rect(auto, auto, auto, auto);
    }
    .percent{
        box-sizing: border-box;
        top:-20px;
        left:-20px;
    }
    .left{
        transition:transform ease;
        border:20px solid #00ff00;
        clip: rect(0,50px,100px,0);
    }
    .right{
        border:20px solid #00ff00;
        clip: rect(0,100px,100px,50px);
    }
    .wth0{
        width:0;
    }
    .num{
        position: absolute;
        box-sizing: border-box;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 40px;
        left: 20px;
        top: 20px;
        border-radius: 50%;
        background-color: #fff;
        z-index: 1;
    }
    .ring-title{
        width: 100%;
        position: absolute;
        bottom: -50px;
        text-align: center;
    }

</style>

转载于:https://my.oschina.net/lslDn/blog/1935974