圓圈形進(jìn)度條在開(kāi)發(fā)中經(jīng)常遇到，這里把他封裝成一個(gè)組件，實(shí)現(xiàn)方式為使用svg畫圖。
下面的代碼中涉及到了svg的viewBox屬性，按照張?chǎng)涡翊笊竦恼f(shuō)法：SVG就像是我們的顯示器屏幕，viewBox就是截屏工具選中的那個(gè)框框，最終的呈現(xiàn)就是把框框中的截屏內(nèi)容再次在顯示器中全屏顯示。

在本次設(shè)計(jì)的圓圈形進(jìn)度條中，主要由兩個(gè)圓圈實(shí)現(xiàn)，一個(gè)圓圈顏色較淺大小不變，另一個(gè)顏色較深，使用stroke-dasharray和stroke-dashoffset屬性來(lái)控制。stroke-dasharray設(shè)置和圓圈的半徑相等(這里采用v-bind方式是因?yàn)橹苯訉憯?shù)字會(huì)被認(rèn)為是文字)，stroke-dashoffset設(shè)置收尾間距。

使用時(shí)，傳入半徑和圓圈有效部分所占比例，收尾之間的間距會(huì)被自動(dòng)設(shè)置：

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>

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。