基于vue的svg进度条组件

时间 2019-12-07

标签基于 vue svg 进度组件繁體版

原文原文链接

svg-progress-bar

基于Vue.js的简单的svg进度条

svg-progress-bar是什么？

svg-progress-bar 是一款基于 circles项目二次开发的vue组件html

功能特性

[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引入 )

例子:vue

详细介绍 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吧。git