圓圈形進度條在開發中經常遇到，這里把他封裝成一個組件，實現方式為使用svg畫圖。
下面的代碼中涉及到了svg的viewBox屬性，按照張鑫旭大神的說法：SVG就像是我們的顯示器屏幕，viewBox就是截屏工具選中的那個框框，最終的呈現就是把框框中的截屏內容再次在顯示器中全屏顯示。

在本次設計的圓圈形進度條中，主要由兩個圓圈實現，一個圓圈顏色較淺大小不變，另一個顏色較深，使用stroke-dasharray和stroke-dashoffset屬性來控制。stroke-dasharray設置和圓圈的半徑相等(這里采用v-bind方式是因為直接寫數字會被認為是文字)，stroke-dashoffset設置收尾間距。

使用時，傳入半徑和圓圈有效部分所占比例，收尾之間的間距會被自動設置：

dashOffset() {return (1 - this.percent) * this.dashArray} //progeress-circle.vue <template><div class="progress-circle"><svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle class="progress-background" r="50" cx="50" cy="50" fill="transparent"/><circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent" :stroke-dasharray="dashArray":stroke-dashoffset="dashOffset"/></svg><slot></slot></div> </template><script type="text/ecmascript-6">export default {props: {radius: {type: Number,default: 100},percent: {type: Number,default: 0}},data() {return {dashArray: Math.PI * 100}},computed: {dashOffset() {return (1 - this.percent) * this.dashArray}}} </script><style scoped lang="stylus" rel="stylesheet/stylus">@import "~common/stylus/variable".progress-circleposition: relativecirclestroke-width: 8pxtransform-origin: center&.progress-backgroundtransform: scale(0.9)stroke: $color-theme-d&.progress-bartransform: scale(0.9) rotate(-90deg)stroke: $color-theme </style> //使用progress-circle <progress-circle :radius="radius" :percent="percent"></progress-circle>

總結

以上是生活随笔為你收集整理的Vue 圆圈形进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。