手把手教你在vue2中利用svg開發一個環形進度條組件

這篇文章給大家詳細介紹如何用svg去開發一個環形進度條vue2元件，希望對大家有幫助！

普通的矩形進度條我們透過div css很容易就可以實現，而環形的就有點麻煩，當然他也可以用div css透過背景屬性或clip屬性配合css3變數做障眼法去實現，但是過於複雜而且相容和控制起來都比較麻煩，所以，達到最佳效果我們還是去使用svg實現吧。 【相關推薦：《vue.js教學》】

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

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

正文

##1.傳參與計算

<script>
export default {
  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)"
    },
    // 动画执行时间
    duration:{
      type: [String, Number],
      default: 1000
    }
  },
  computed: {
    percentage() {
      return this.value;
    },
    countDown() {
      return this.now;
    },
    // 圆心x轴坐标
    cx() {
      return this.size / 2;
    },
    // 圆心y轴坐标  
    cy() {
      return this.size / 2;
    },
    // 半径
    radius() {
      return (this.size - this.strokeWidth) / 2;
    },
    // 圆周长
    circumference() {
      return 2 * Math.PI * this.radius;
    },
    // 进度长度  
    progress() {
      return (1 - this.now / 100) * this.circumference;
    }
  },
};
</script>

相信大家透過上面的註解怎麼開發就會猜的八九不十，我們的這個元件可以設定大小，邊框粗細，進度條顏色，和後面要多久從0呈現出進度值的動畫時長。至於計算屬性，會在後面繪製svg的時候，根據註解一一對應不難看出來目的。

2.結構與樣式

<template>
  <div class="circle-main">
    <div class="circle-main-box" :style="[{ &#39;width&#39;: size+&#39;px&#39;,&#39;height&#39;: size+&#39;px&#39;}]">
      <svg :width="size" :height="size" class="circle">
        <circle
          :r="radius"
          :cx="cx"
          :cy="cy"
          fill="transparent"
          stroke="#EEEEEE"
          :stroke-width="strokeWidth"
        />
        <circle
          :r="radius"
          :cx="cx"
          :cy="cy"
          fill="transparent"
          :stroke="color"
          :stroke-width="strokeWidth"
          stroke-linecap="round"
          :stroke-dasharray="circumference"
          :stroke-dashoffset="progress"
        />
      </svg>
      <span class="count-num" :style="[{ &#39;font-size&#39;: size*.3+&#39;px&#39;}]">{{countDown}}%</span>
    </div>
  </div>
</template>

其實這個很簡單就是用svg寫兩個圓環，第一個當灰色底圓，第二個就是我們的進度條了，設定好大小圓心半徑邊框色，而且我們要把填充色變為同名，都寫完了剩下兩項stroke-dasharray和stroke-dashoffset，相信大家都會猜的到了，svg進度條變化核心就是這兩個屬性，剛剛計算屬性也算出來了，分別就是圓環的周長和當前進度的長度。我們利用當前進度值來計算百分比佔目前的長度，實現環形進度條的變化，就是這麼簡單。

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

所以我們要用css再給他轉90度來！

.circle {
  transform: rotate(-90deg);
}

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

.circle-main-box {
  position: relative;
  display: block;
  margin: 0 auto;
}
.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;
}

這樣我們就得到了一個靜態的環形進度條了。

3.動畫與使用

<script>
export default {
  name: "CircleProgress",
  // ...
  mounted() {
    this.run();
  },
  methods: {
    run() {
      if (this.value == 0) return;
      let t = this.duration / this.value
      this.timer = setInterval(() => {
        if (this.now >= this.value) {
          return clearInterval(this.timer);
        }
        this.now++;
      }, t);
    }
  }
};

我們會透過目前動畫執行時間與目前的值計算出每次數量1執行的時間，然後透過setInterval去執行，直至達到進度值。最後，我們就要開始使用這個元件啦~~

<div id="app">
    <CircleProgress :value="60" :size="150" :color="&#39;#d36&#39;"  :duration="3000" />
</div>

結語

你學廢了麼，以後做類似的像完成度這樣的加載器是不是又有新的想法了，有了圓形做基礎，還怕其他圖形麼，看的再多，說的再多，都不如動手去試試，快行動起來吧，大家加油鴨~~

更多程式相關知識，請造訪：

程式設計影片！ ！

以上是手把手教你在vue2中利用svg開發一個環形進度條組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！