Skip to content

Latest commit

 

History

History
112 lines (95 loc) · 5.17 KB

README.md

File metadata and controls

112 lines (95 loc) · 5.17 KB
Raw

svg-progress-bar

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

Build Status LICENSE MIT

🐾在线 demo | 🌾 小 demo | 📘 英文文档

浏览器兼容性

IE
IE		 Firefox
Firefox		 Chrome
Chrome		 Safari
Safari		 iOS Safari
iOS		 Chrome for Android
Android
IE9+ ✓ ✓ ✓ ✓ ✓

svg-progress-bar是什么？

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

功能特性

  • 零依赖,体积小
  • 目前支持圆环/矩形的进度条
  • 配置多满足多样需求
  • 持续维护

安装

NPM

npm install svg-progress-bar --save

使用

ES6

详细介绍 example-src/App.vue

// **main.js**
// 1.全局 install
import Vue from 'vue'
import svg from 'svg-progress-bar'
// 你可以自己设置全局注册的组件名 默认注册的组件名是 svg-progress-bar
Vue.use(svg,{componentName: 'percent-bar'})

// 2.单个.vue文件局部注册
<script>
  import svg from 'svg-progress-bar'
   export default {
      components: {
        svg
      }
   }
</script>

普通模式 (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
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

历史版本

See the GitHub 历史版本.

License

svg-progress-bar is open source and released under the MIT License.