基於Vue.js的簡單的svg進度條

chenxuan0000發表於2019-03-02
Vue.jsSVG

svg-progress-bar

基於Vue.js的簡單的svg進度條

基於Vue.js的簡單的svg進度條

svg-progress-bar是什麼？

svg-progress-bar 是一款基於 circles專案二次開發的vue元件

功能特性

  • [x] 零依賴,體積小
  • [x] 目前支援圓環/矩形的進度條
  • [x] 配置多滿足多樣需求
  • [x] 持續維護

安裝

NPM

npm install svg-progress-bar --save
複製程式碼

使用

ES6

詳細介紹 example-src/App.vue

import Vue from 'vue'
import vueProgressBar from 'svg-progress-bar'

new Vue({
  components: {
    vueProgressBar
  }
})
複製程式碼

普通模式 (script引入 )

例子:

詳細介紹 test/test.html

<html>
<head>
  ...
</head>
<body>
  <div id="app">
    <svg-progress-bar></svg-progress-bar>
  </div>
  <script src="vue.js"></script>
  <script src="svg-progress-bar"></script>
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</body>
</html>
複製程式碼

配置引數

key description default val
type 進度條型別 'circle' 'circle' 'rect'
value 進度條的初始值 0 Number String
options 進度條的options物件引數 {} Object
options.radius 環形進度條半徑 50 Number
options.circleWidth 環形進度條線寬 10 Number
options.circleWidthArray 如果你想要不等寬的環形條可以設定環形進度條線寬度組 null Array
options.circleLinecap 環形進度條的邊角形狀 '' 'round',''
options.maxValue 進度條的最大值 100 Number
options.text 進度條的文字格式 function (value) {return this.htmlifyNumber(value)} Function
options.textColor 進度條的文字顏色 #000 color
options.pathColors 進度條填充的顏色佇列 ['#EEE', '#F00'] Array
options.gradientColor 進度條填充的漸變色 null Array
options.gradientOpacity 進度條填充的漸變色透明度 [1,1] Array
options.duration 進度條的動畫時間 500 Number
options.rectWidth 矩形進度條的寬度 400 Number
options.rectHeight 矩形進度條的高度 40 Number
options.rectRadius 矩形進度條的圓角度 0 Number
options.valAddCalBack 進度條value變化對應節點的回撥事件 [] [{value: 20,func: () => {this.dotValArr.per20 = 20}},{value: 40,func: () => {this.dotValArr.per40 = 40}}]

TKS

svg-progress-bar發現bug或者有什麼不足望指點,感覺不錯點個star吧。

相關文章