基於Vue.js的簡單的svg進度條

時間 2019-11-22

標籤基於 vue.js vue 簡單 svg 進度欄目 JavaScript 简体版

原文原文鏈接

svg-progress-bar

基於Vue.js的簡單的svg進度條html

svg-progress-bar是什麼？

svg-progress-bar 是一款基於 circles項目二次開發的vue組件vue

功能特性

[x] 零依賴,體積小
[x] 目前支持圓環/矩形的進度條
[x] 配置多知足多樣需求
[x] 持續維護

安裝

NPM

npm install svg-progress-bar --save
複製代碼

使用

ES6

詳細介紹 example-src/App.vuegit

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

new Vue({
  components: {
    vueProgressBar
  }
})
複製代碼

普通模式 (script引入 )

例子:github

詳細介紹 test/test.htmlnpm

<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>
複製代碼

配置參數

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}}]`