JavaScript Daily - Telegram канал для frontend-разработчиков.

Vue-progressbar — легковесный лоадер для приложений на VueJS

04.12.2018 weatherless JavaScript » VueJS » #1899

Смотреть Источник Скачать

Если у Вас одностраничное приложение, то Вам определенно понадобиться индикатор загрузки компонентов и контента в них. Можно начать строить велосипед и сделать прогресс-бар самому. А можно просто взять готовое великолепное решение.

С чем имеем дело

~~Vue-progressbar~~ — это простое и изящное расширение для проектов, создаваемых с помощью фреймворка VueJS. Его задача — показать пользователю текущий прогресс загрузки данных. В данном случае, элемент выполнены в современном стиле: быстро бегущая цветная полоса сверху страницы. Похожее можно встретить на многих популярных сайтах.

Как начать пользоваться

Установка:

$ npm install vue-progressbar

В ~~main.js~~ указываем:

import VueProgressBar from 'vue-progressbar'

Vue.use(VueProgressBar, {
  color: 'rgb(143, 255, 199)',
  failedColor: 'red',
  height: '2px'
})

В App.vue копируем:

<template>
    <div id="app">
        <!-- for example router view -->
        <router-view></router-view>
        <!-- set progressbar -->
        <vue-progress-bar></vue-progress-bar>
    </div>
</template>

К примеру, в дочерних компонентах делаем что-то асинхронное:

<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>