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

3,889 阅读2分钟

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吧。