基于vue的svg進度條組件

fasss 發布于2019-08-22 13:46 / 1382人閱讀

摘要：基于的簡單的進度條在線在線是什么是一款基于項目二次開發的組件功能特性零依賴體積小目前支持圓環矩形的進度條配置多滿足多樣需求持續維護安裝使用詳細介紹普通模式引入例子詳細介紹配置參數進度條類型進度條的初始值

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好看的進度條進度條

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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