Как и понятно из заголовка, речь пойдет о лоадер-компоненте, который можно применять совместно с асинхронными операциями в среде Vue.
Описание loader-компонента VueJS
Простой и удобный инструмент, который добавит в Ваш проект симпатичную полосу загрузки с полной кастомизацией. В демо показана работа компонента: процесс загрузки и удачная\не удачная операция.
Установка и использование
Инсталлируем с помощью NPM:
|
1 |
npm install vue2-loading-bar |
Добавляем в Ваш HTML:
|
1 2 3 4 5 6 7 8 9 |
<loading-bar id="loading-bar-id" custom-class="custom-class" :on-error-done="errorDone" :on-progress-done="progressDone" :progress="progress" :direction="direction" :error="error" > </loading-bar> |
Описания входных параметров
id (String)
кастомный Id в vue2-loading-bar компоненте
customClass (String)
кастомный className в vue2-loading-bar компоненте
progress (Number)
Прогресс в процентах
direction (String)
Направление анимации. Доступны положения 'right' или 'left' по умолчанию 'right'
error (Boolean)
Индикатор для отображения состояния ошибки
onErrorDone (Function, required)
Следует ли изменить родительское состояние, когда прогресс бар закончил с состоянием ошибки
onProgressDone (Function, required)
Должно ли netralize состояние выполнения родителя быть 0