svg-progress-bar | 基于vuejs的简单svg进度条组件


源码介绍

简要教程

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

github网址:https://github.com/chenxuan0000/svg-progress-bar



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部