亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

基于vue的svg進(jìn)度條組件

fasss / 1462人閱讀

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

svg-progress-bar 
基于Vue.js的簡(jiǎn)單的svg進(jìn)度條

?在線demo1

?在線demo2

svg-progress-bar是什么？

svg-progress-bar 是一款基于 circles項(xiàng)目二次開發(fā)的vue組件

功能特性

[x] 零依賴,體積小

[x] 目前支持圓環(huán)/矩形的進(jìn)度條

[x] 配置多滿足多樣需求

[x] 持續(xù)維護(hù)

安裝 NPM 
npm install svg-progress-bar --save
使用 ES6 
詳細(xì)介紹 example-src/App.vue

import Vue from "vue"
import vueProgressBar from "svg-progress-bar"

new Vue({
  components: {
    vueProgressBar
  }
})
普通模式 (script引入 )

例子:

詳細(xì)介紹 test/test.html



  ...
配置參數(shù)
key description default val
type 進(jìn)度條類型 "circle" "circle" "rect"
value 進(jìn)度條的初始值 0 Number String
options 進(jìn)度條的options對(duì)象參數(shù) {} Object
options.radius 環(huán)形進(jìn)度條半徑 50 Number
options.circleWidth 環(huán)形進(jìn)度條線寬 10 Number
options.circleWidthArray 如果你想要不等寬的環(huán)形條可以設(shè)置環(huán)形進(jìn)度條線寬度組 null Array
options.circleLinecap 環(huán)形進(jìn)度條的邊角形狀 "" "round",""
options.maxValue 進(jìn)度條的最大值 100 Number
options.text 進(jìn)度條的文本格式 function (value) {return this.htmlifyNumber(value)} Function
options.textColor 進(jìn)度條的文本顏色 #000 color
options.pathColors 進(jìn)度條填充的顏色隊(duì)列 ["#EEE", "#F00"] Array
options.gradientColor 進(jìn)度條填充的漸變色 null Array
options.gradientOpacity 進(jìn)度條填充的漸變色透明度 [1,1] Array
options.duration 進(jìn)度條的動(dòng)畫時(shí)間 500 Number
options.rectWidth 矩形進(jìn)度條的寬度 400 Number
options.rectHeight 矩形進(jìn)度條的高度 40 Number
options.rectRadius 矩形進(jìn)度條的圓角度 0 Number
options.valAddCalBack 進(jìn)度條value變化對(duì)應(yīng)節(jié)點(diǎn)的回調(diào)事件 [] [{value: 20,func: () => {this.dotValArr.per20 = 20}},{value: 40,func: () => {this.dotValArr.per40 = 40}}]
TKS

svg-progress-bar發(fā)現(xiàn)bug或者有什么不足望指點(diǎn),感覺不錯(cuò)點(diǎn)個(gè)star吧。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/92417.html

相關(guān)文章

  • vue 圓形進(jìn)度條組件解析

    摘要：項(xiàng)目簡(jiǎn)介本組件是下的圓形進(jìn)度條動(dòng)畫組件自由可定制，幾乎全部參數(shù)均可設(shè)置源碼簡(jiǎn)單清晰面向人群急于使用圓形進(jìn)度條動(dòng)畫組件的同學(xué)。由于動(dòng)畫關(guān)鍵幀的定義需要根據(jù)外部傳入的參數(shù)決定，不能預(yù)先寫死。所以通過生成節(jié)點(diǎn)的方式插入關(guān)鍵幀。 項(xiàng)目簡(jiǎn)介 本組件是vue下的圓形進(jìn)度條動(dòng)畫組件 自由可定制，幾乎全部參數(shù)均可設(shè)置 源碼簡(jiǎn)單清晰showImg(https://segmentfault.com/im...

    Cheng_Gang 評(píng)論0 收藏0

  • 基于vue的移動(dòng)端web音樂播放器

    摘要：代碼實(shí)現(xiàn)得到合適的瀏覽器前綴對(duì)外暴露的方法使用案例導(dǎo)入該模塊加了合適前綴的屬性使用該屬性移動(dòng)端的事件隨著觸屏設(shè)備的普及，為移動(dòng)端新增了事件。如果用戶的手指從觸屏設(shè)備的邊緣移出了觸屏設(shè)備，也會(huì)觸發(fā)事件。 聲明 以下只是學(xué)習(xí)完慕課網(wǎng)huangyi老師實(shí)戰(zhàn)視頻課程的筆記內(nèi)容，僅供個(gè)人參考學(xué)習(xí)使用。如果對(duì)Vue2.0實(shí)戰(zhàn)高級(jí)-開發(fā)移動(dòng)端音樂WebApp感興趣的話，請(qǐng)移步這里：https://c...

    tracy 評(píng)論0 收藏0

  • 基于vue的移動(dòng)端web音樂播放器

    摘要：代碼實(shí)現(xiàn)得到合適的瀏覽器前綴對(duì)外暴露的方法使用案例導(dǎo)入該模塊加了合適前綴的屬性使用該屬性移動(dòng)端的事件隨著觸屏設(shè)備的普及，為移動(dòng)端新增了事件。如果用戶的手指從觸屏設(shè)備的邊緣移出了觸屏設(shè)備，也會(huì)觸發(fā)事件。 聲明 以下只是學(xué)習(xí)完慕課網(wǎng)huangyi老師實(shí)戰(zhàn)視頻課程的筆記內(nèi)容，僅供個(gè)人參考學(xué)習(xí)使用。如果對(duì)Vue2.0實(shí)戰(zhàn)高級(jí)-開發(fā)移動(dòng)端音樂WebApp感興趣的話，請(qǐng)移步這里：https://c...

    chemzqm 評(píng)論0 收藏0

  • Vue2.0 仿滴滴出行項(xiàng)目

    摘要：仿滴滴出行項(xiàng)目最近，各大社區(qū)出現(xiàn)很多小伙伴的項(xiàng)目，趁著這股熱潮我也用擼了一個(gè)滴滴出行的項(xiàng)目?？墒?，后來在手機(jī)上發(fā)現(xiàn)，輸入的時(shí)候居然調(diào)不出軟鍵盤，寫項(xiàng)目的時(shí)候沒考慮到設(shè)備問題，簡(jiǎn)直是大大的失誤。也就是說可以在組件內(nèi)部進(jìn)行請(qǐng)求，不需要提交。 Vue2.0 仿滴滴出行項(xiàng)目 最近，各大社區(qū)出現(xiàn)很多小伙伴的vue項(xiàng)目，趁著這股熱潮我也用vue擼了一個(gè)滴滴出行的項(xiàng)目。 效果預(yù)覽 showImg(h...

    ShevaKuilin 評(píng)論0 收藏0

  • 基于Vue的事件響應(yīng)式進(jìn)度條組件

    摘要：事件響應(yīng)式進(jìn)度條的應(yīng)用場(chǎng)景主要是自定義播放器的進(jìn)度條。效果圖以上就是可以利用本組件實(shí)現(xiàn)的一些效果，他們都能響應(yīng)和兩種事件。部分對(duì)現(xiàn)在就有需求使用這個(gè)帶事件的進(jìn)度條的同學(xué)來說，看看這部分，可以幫助你自己修改完善它。 寫在前面 找了很多vue進(jìn)度條組件，都不包含拖拽和點(diǎn)擊事件，input range倒是原生包含input和change事件，但是直接基于input range做進(jìn)度條的...

    renweihub 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<