svg-progress-bar | 基于vuejs的简单svg进度条组件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

svg-progress-bar 是一款基于 circles 项目二次开发的vue svg进度条组件。它零依赖,体积小，支持圆环和条形的进度条，并提供大量配置项来满足用户的各种需求。

使用方法

安装

如果您想使用svg-progress-bar进度条组件，首先您需要安装它，命令如下：

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
  }
}

script引入

<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`	进度条的初始值	`0`	`Number` `String`
`valAddCalBack`	进度条value变化对应节点的回调事件	`[]`	`[{value: 20,func: () => {this.dotValArr.per20 = 20}},{value: 40,func: () => {this.dotValArr.per40 = 40}}]`
`options`	进度条的options对象参数	`{}`	`Object`
`options.radius`	环形进度条半径	`50`	`Number`
`options.valRate`	value每次增加的幅度(建议<=1)	`1`	`Number`
`options.circleWidth`	环形进度条线宽	`10`	`Number`
`options.varyStrokeArray`	如果你想要不等宽的环形条或者柱形条可以设置宽度/高度组	`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`