基于vue的svg进度条组件

fasss 发布于2019-08-22 13:46 / 1361人阅读

摘要：基于的简单的进度条在线在线是什么是一款基于项目二次开发的组件功能特性零依赖体积小目前支持圆环矩形的进度条配置多满足多样需求持续维护安装使用详细介绍普通模式引入例子详细介绍配置参数进度条类型进度条的初始值

svg-progress-bar

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

?在线demo1

?在线demo2

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

...

配置参数

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

GPU云服务器云服务器不同颜色的进度条 html的圆形进度条 java好看的进度条进度条

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92417.html

vue 圆形进度条组件解析

摘要：项目简介本组件是下的圆形进度条动画组件自由可定制，几乎全部参数均可设置源码简单清晰面向人群急于使用圆形进度条动画组件的同学。由于动画关键帧的定义需要根据外部传入的参数决定，不能预先写死。所以通过生成节点的方式插入关键帧。项目简介本组件是vue下的圆形进度条动画组件自由可定制，几乎全部参数均可设置源码简单清晰showImg(https://segmentfault.com/im...

Cheng_Gang 2019-08-23 12:14 评论0 收藏0
基于vue的移动端web音乐播放器

摘要：代码实现得到合适的浏览器前缀对外暴露的方法使用案例导入该模块加了合适前缀的属性使用该属性移动端的事件随着触屏设备的普及，为移动端新增了事件。如果用户的手指从触屏设备的边缘移出了触屏设备，也会触发事件。声明以下只是学习完慕课网huangyi老师实战视频课程的笔记内容，仅供个人参考学习使用。如果对Vue2.0实战高级-开发移动端音乐WebApp感兴趣的话，请移步这里：https://c...

tracy 2019-08-22 18:41 评论0 收藏0
基于vue的移动端web音乐播放器

摘要：代码实现得到合适的浏览器前缀对外暴露的方法使用案例导入该模块加了合适前缀的属性使用该属性移动端的事件随着触屏设备的普及，为移动端新增了事件。如果用户的手指从触屏设备的边缘移出了触屏设备，也会触发事件。声明以下只是学习完慕课网huangyi老师实战视频课程的笔记内容，仅供个人参考学习使用。如果对Vue2.0实战高级-开发移动端音乐WebApp感兴趣的话，请移步这里：https://c...

chemzqm 2019-08-02 10:53 评论0 收藏0
Vue2.0 仿滴滴出行项目

摘要：仿滴滴出行项目最近，各大社区出现很多小伙伴的项目，趁着这股热潮我也用撸了一个滴滴出行的项目。可是，后来在手机上发现，输入的时候居然调不出软键盘，写项目的时候没考虑到设备问题，简直是大大的失误。也就是说可以在组件内部进行请求，不需要提交。 Vue2.0 仿滴滴出行项目最近，各大社区出现很多小伙伴的vue项目，趁着这股热潮我也用vue撸了一个滴滴出行的项目。效果预览 showImg(h...

ShevaKuilin 2019-08-21 11:44 评论0 收藏0
基于Vue的事件响应式进度条组件

摘要：事件响应式进度条的应用场景主要是自定义播放器的进度条。效果图以上就是可以利用本组件实现的一些效果，他们都能响应和两种事件。部分对现在就有需求使用这个带事件的进度条的同学来说，看看这部分，可以帮助你自己修改完善它。写在前面找了很多vue进度条组件，都不包含拖拽和点击事件，input range倒是原生包含input和change事件，但是直接基于input range做进度条的...

renweihub 2019-08-26 11:36 评论0 收藏0