Если у Вас одностраничное приложение, то Вам определенно понадобиться индикатор загрузки компонентов и контента в них. Можно начать строить велосипед и сделать прогресс-бар самому. А можно просто взять готовое великолепное решение.
С чем имеем дело
Vue-progressbar — это простое и изящное расширение для проектов, создаваемых с помощью фреймворка VueJS. Его задача — показать пользователю текущий прогресс загрузки данных. В данном случае, элемент выполнены в современном стиле: быстро бегущая цветная полоса сверху страницы. Похожее можно встретить на многих популярных сайтах.
Как начать пользоваться
Установка:
|
1 |
$ npm install vue-progressbar |
В main.js указываем:
|
1 2 3 4 5 6 7 |
import VueProgressBar from 'vue-progressbar' Vue.use(VueProgressBar, { color: 'rgb(143, 255, 199)', failedColor: 'red', height: '2px' }) |
В App.vue копируем:
|
1 2 3 4 5 6 7 8 |
<template> <div id="app"> <!-- for example router view --> <router-view></router-view> <!-- set progressbar --> <vue-progress-bar></vue-progress-bar> </div> </template> |
К примеру, в дочерних компонентах делаем что-то асинхронное:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<script> export default { methods:{ start () { this.$Progress.start() }, set (num) { this.$Progress.set(num) }, increase (num) { this.$Progress.increase(num) }, decrease (num) { this.$Progress.decrease(num) }, finish () { this.$Progress.finish() }, fail () { this.$Progress.fail() }, test(){ this.$Progress.start() this.$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?apikey=7waqfqbprs7pajbz28mqf6vz') .then((response) => { this.$Progress.finish() }, (response) => { this.$Progress.fail() }) } } } </script> |
Заключение
На страничке проекта Github можно найти подробное описание API плагина, а также его взаимодействие с api-axios.js.
В категории «прогресс баров» для VueJS, библиотека Vue-progressbar является оптимальной в плане конфигураций и быстродействия.