svg-progress-bar
基于Vue.js的簡單的svg進度條
image
svg-progress-bar是什么？
svg-progress-bar 是一款基于 circles項目二次開發(fā)的vue組件
功能特性
- [x] 零依賴,體積小
- [x] 目前支持圓環(huán)/矩形的進度條
- [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>
配置參數(shù)
| key | description | default | val |
|---|---|---|---|
type |
進度條類型 | 'circle' |
'circle' 'rect'
|
value |
進度條的初始值 | 0 |
Number String
|
options |
進度條的options對象參數(shù) | {} |
Object |
options.radius |
環(huán)形進度條半徑 | 50 |
Number |
options.circleWidth |
環(huán)形進度條線寬 | 10 |
Number |
options.circleWidthArray |
如果你想要不等寬的環(huán)形條可以設(shè)置環(huán)形進度條線寬度組 | null |
Array |
options.circleLinecap |
環(huán)形進度條的邊角形狀 | '' |
'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變化對應(yīng)節(jié)點的回調(diào)事件 | [] |
[{value: 20,func: () => {this.dotValArr.per20 = 20}},{value: 40,func: () => {this.dotValArr.per40 = 40}}] |
TKS
svg-progress-bar發(fā)現(xiàn)bug或者有什么不足望指點,感覺不錯點個star吧。
