Слияние кода завершено, страница обновится автоматически
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+ | ✓| ✓ | ✓ | ✓ | ✓ | ✓
svg-progress-bar — это основанный на circles вторичный проект компонентов vue.
npm install svg-progress-bar --save
Конкретная ссылка: 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>
s
Пример:
Конкретная ссылка: 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 |
Смотрите историю выпусков на GitHub по ссылке: https://github.com/chenxuan0000/svg-progress-bar/releases.
svg-progress-bar — это открытый исходный код, выпущенный под лицензией MIT (LICENSE).
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )