svg-progress-bar | 基于vuejs的简单svg进度条组件
源码介绍
svg-progress-bar 是一款基于 circles 项目二次开发的vue svg进度条组件。它零依赖,体积小，支持圆环和条形的进度条，并提供大量配置项来满足用户的各种需求。 如果您想使用svg-progress-bar进度条组件，首先您需要安装它，命令如下： 全局使用 局部使用 script引入简要教程
使用方法
安装
npm install svg-progress-bar --save
// yarn
yarn add svg-progress-bar
使用
// main.js
import Vue from 'vue'
import svg from 'svg-progress-bar'
// 你可以自己设置全局注册的组件名 默认注册的组件名是 svg-progress-bar
Vue.use(svg,{componentName: 'percent-bar'})
// xxx.vue
import svg from 'svg-progress-bar'
export default {
components: {
svg
}
}
<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>
配置参数
参数
描述
默认值
可选值
type进度条类型
'circle''circle' 'rect'
value进度条的初始值
0Number String
valAddCalBack进度条value变化对应节点的回调事件
[][{value: 20,func: () => {this.dotValArr.per20 = 20}},{value: 40,func: () => {this.dotValArr.per40 = 40}}]
options进度条的options对象参数
{}Object
options.radius环形进度条半径
50Number
options.valRatevalue每次增加的幅度(建议<=1)
1Number
options.circleWidth环形进度条线宽
10Number
options.varyStrokeArray如果你想要不等宽的环形条或者柱形条可以设置宽度/高度组
nullArray
options.circleLinecap环形进度条的边角形状
'''round',''
options.maxValue进度条的最大值
100Number
options.text进度条的文本格式
function (value) {return this.htmlifyNumber(value)}Function
options.textColor进度条的文本颜色
#000color
options.pathColors进度条填充的颜色队列
['#EEE', '#F00']Array
options.gradientColor进度条填充的渐变色
nullArray
options.gradientOpacity进度条填充的渐变色透明度
[1,1]Array
options.duration进度条的动画时间
500Number
options.rectWidth矩形进度条的宽度
400Number
options.rectHeight矩形进度条的高度
40Number
options.rectRadius矩形进度条的圆角度
0Number
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » svg-progress-bar | 基于vuejs的简单svg进度条组件
发表评论 取消回复