svg-progress-bar
基于Vue.js的简单的svg进度条
image
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吧。
