svg-progress-bar
基于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吧。
扫一扫
280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
