OSCHINA-MIRROR/mirrors-svg-progress-bar

Простой индикатор выполнения для Vue.js

svg-progress-bar — простой индикатор выполнения для Vue.js.

🐾онлайн-демонстрация | 🌾 простая демонстрация | 📘 документация на китайском языке

#### Поддержка браузеров | [

](http://godban.github.io/browsers-support-badges/)IE | [

](http://godban.github.io/browsers-support-badges/)Firefox | [

](http://godban.github.io/browsers-support-badges/)Chrome | [

](http://godban.github.io/browsers-support-badges/)Safari | [

](http://godban.github.io/browsers-support-badges/)iOS | [

](http://godban.github.io/browsers-support-badges/)Android | |:---------:|:---------:|:---------:|:---------:|:---------:|:---------:| | IE9+ | &check;| &check; | &check; | &check; | &check; | &check;

Что такое svg-progress-bar?

svg-progress-bar — это основанный на circles вторичный проект компонентов vue.

Особенности

не зависит от других библиотек, небольшой объём.
в настоящее время поддерживает циклический и прямоугольный индикаторы выполнения.
конфигурация соответствует различным требованиям.
текущее обслуживание.

Установка

NPM

npm install svg-progress-bar --save

Использование

ES6

Конкретная ссылка: example-src/App.vue

// **main.js**
import Vue from 'vue'
import svg from 'svg-progress-bar'
// вы можете установить componentName по умолчанию componentName — svg-progress-bar
Vue.use(svg,{componentName: 'percent-bar'})
// 1. глобальная установка
import Vue from 'vue'
import svg from 'svg-progress-bar'
// вы можете настроить пользовательский componentName
Vue.use(svg,{componentName: 'percent-bar'})

// 2. установка в одном файле .vue
<script>
  import svg from 'svg-progress-bar'
   export default {
      components: {
        svg
      }
   }
</script>

обычное использование (тег скрипта)

Пример:

Конкретная ссылка: test/test.html

<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`	valAddCalBack индикатора выполнения	`[]`	`[{value: 20,func: () => {this.dotValArr.per20 = 20}},{value: ## Параметры
Параметры индикатора выполнения:
Параметр	Описание	Значение	Тип
:--:	:--:	:--:	:--:
options	параметры индикатора выполнения	{}	Object
options.valRate	скорость добавления значения кругового индикатора выполнения (рекомендуется <= 1)	1	Number
options.radius	радиус кругового индикатора выполнения	50	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

Changelog

Смотрите историю выпусков на GitHub по ссылке: https://github.com/chenxuan0000/svg-progress-bar/releases.

License

svg-progress-bar — это открытый исходный код, выпущенный под лицензией MIT (LICENSE).