基于vue的svg进度条组件

2019年9月14日 315次阅读 来源: data_Driven

svg-progress-bar

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

《基于vue的svg进度条组件》《基于vue的svg进度条组件》 《基于vue的svg进度条组件》

《基于vue的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>

配置参数

keydescriptiondefaultval
type进度条类型'circle' 'circle' 'rect'
value进度条的初始值0 Number String
options进度条的options对象参数{}Object
options.radius环形进度条半径50Number
options.circleWidth环形进度条线宽10Number
options.circleWidthArray如果你想要不等宽的环形条可以设置环形进度条线宽度组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
options.valAddCalBack进度条value变化对应节点的回调事件[][{value: 20,func: () => {this.dotValArr.per20 = 20}},{value: 40,func: () => {this.dotValArr.per40 = 40}}]

TKS

svg-progress-bar发现bug或者有什么不足望指点,感觉不错点个star吧。

    原文作者：data_Driven
    原文地址: https://segmentfault.com/a/1190000012821191
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞