第手把手教你在vue2中利用svg開發(fā)一個環(huán)形進度條組件普通的矩形進度條我們通過div+CSS很容易就可以實現(xiàn)，而環(huán)形的就有點麻煩，當然他也可以用div+css通過背景屬性或者clip屬性配合css3變量做障眼法去實現(xiàn)，但是過于復雜而且兼容和控制起來都比較麻煩，所以，達到最佳效果我們還是去使用svg實現(xiàn)吧。

我們先康康最后完成的效果吧：

開發(fā)自己組件好處就是，里面的大小，顏色，粗細，動畫等等都可以任意擴展，準備好了么，馬上要開始啦~

1.傳參與計算

script

exportdefault{

name:CircleProgress,

data(){

return{

now:0

props:{

//進度值

value:{

type:[String,Number],

default:0

//尺寸

size:{

type:[String,Number],

default:120

//邊框粗細

strokeWidth:{

type:[String,Number],

default:10

//進度條顏色

color:{

type:String,

default:rgba(153,202,251,1)

//動畫執(zhí)行時間

duration:{

type:[String,Number],

default:1000

computed:{

percentage(){

returnthis.value;

countDown(){

returnthis.now;

//圓心x軸坐標

cx(){

returnthis.size/2;

//圓心y軸坐標

cy(){

returnthis.size/2;

//半徑

radius(){

return(this.size-this.strokeWidth)/2;

//圓周長

circumference(){

return2*Math.PI*this.radius;

//進度長度

progress(){

return(1-this.now/100)*this.circumference;

/script

相信大家通過上面的注釋怎么開發(fā)就會猜的八九不十，我們的這個組件可以設置大小，邊框粗細，進度條顏色，和后面要多久從0呈現(xiàn)出進度值的動畫時長。至于計算屬性，會在后面繪制svg的時候，根據(jù)注釋一一對應不難看出來目的。

2.結(jié)構(gòu)與樣式

template

div>AIn

div>

其實這個很簡單就是用svg寫兩個圓環(huán)，第一作為灰色底圓，第二個就是我們的進度條了，設置好大小圓心半徑邊框色，而且我們要把填充色變?yōu)橥?，都寫完了剩下兩項stroke-dasharray和stroke-dashoffset，相信大家都會猜的到了，svg進度條變化核心就是這兩個屬性，剛剛計算屬性也算出來了，分別就是圓環(huán)的周長和當前進度的長度。我們利用當前進度值來計算百分比占當前的長度，實現(xiàn)環(huán)形進度條的變化，就是這么簡單。

然后我們還要寫一丟丟css，而且是必須寫，因為svg圓環(huán)不是從我們認為的0度開始，而是偏移了90度。

所以我們要用css再給他轉(zhuǎn)過90度來！

.circle{

transform:rotate(-90deg);

}

然后我們順便寫好文字和主框的一些樣式。

.circle-main-box{

position:relative;

display:block;

margin:0auto;

.count-num{

width:100px;

height:100px;

position:absolute;

left:50%;

top:50%;

margin-left:-50px;

margin-top:-50px;

align-items:center;

justify-content:center;

display:flex;

font-family:fantasy;

font-size:30px;

color:#333;

user-select:none;

}

這樣我們就得到了一個靜態(tài)的環(huán)形進度條了。

3.動畫與使用

script

exportdefault{

name:CircleProgress,

//...

mounted(){

this.run();

methods:{

run(){

if(this.value==0)return;

lett=this.duration/this.value

this.timer=setInterval(()={

if(this.now=this.value){

returnclearInterval(this.timer);

this.now++;

},t);

};

我們會通過當前動畫執(zhí)行時間與當前的值計算出每次數(shù)量+1執(zhí)行的時間，然后通過setInterval去執(zhí)行，直至達到進度值。最后，我們就要開始使用這個組件啦~~

divid=app

CircleProgress:value=60:size=150: