Как получить отображение vue -progressbar? - PullRequest
Новая
       48

Как получить отображение vue -progressbar?

0 голосов
/ 28 мая 2020

Как отобразить vue -progressbar?

Используемый vue -progressbar: https://github.com/hilongjw/vue-progressbar

api-ax ios. js создает экземпляр ax ios, используя URL-адрес, с которого он будет извлекаться.

Данные извлекаются, но индикатор выполнения не отображается. В консоли браузера нет ошибок.

Любая помощь будет принята с благодарностью.

app. js: 

require('./bootstrap');

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

import PostComponent from './components/PostComponent'
import PortalComponent from './components/PortalComponent'

import App from './components/App'

const router = new VueRouter({
        base: '/',
        mode: 'history',
        history: true,

        routes: [
        {
            path: '/',
            name: 'home',
            component: PostComponent,
            meta: {
              progress: {
                func: [
                  {call: 'color', modifier: 'temp', argument: '#ffb000'},
                  {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                  {call: 'location', modifier: 'temp', argument: 'top'},
                  {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
                ]
              }
            }
        },
        {   path: '/portal/:id', 
            component: PortalComponent 
        },
    ],
});

import VueProgressBar from 'vue-progressbar'

const options = {
  color: '#bffaf3',
  failedColor: '#874b4b',
  thickness: '5px',
  transition: {
    speed: '0.2s',
    opacity: '0.6s',
    termination: 300
  },
  autoRevert: true,
  location: 'left',
  inverse: false
}

Vue.use(VueProgressBar, options)

export default new Vue({
    el: '#app',
    components: { App },
    router,
    }).$mount('#app')

Vue компонент, который использует vue -progressbar: 

<template>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
             <!--   <div class="card-header">Jobs</div> -->

                <div class="card-body">
                  <div class="col" ref="posts-window">
                     <div v-for="post in posts" :key="post.id">

                        <p>{{ post.title }}</p>
                        <p>{{ post.description }}</p>
                        <p>{{ post.body }}</p>

                        <p> <button v-on:click="handleClick(post)">Links</button> </p>

                     </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>

import instance from '../api-axios.js'

    export default {

        data () {
            return {
              posts: {},
            }   
        },


        watch: {
           messages() {
           this.scrollToBottom();
          }
      },

        methods: {

            methods: {

            getPosts(){

                //var url = "/postlist"
                // axios
                // .get(url)
                // .then(response => (this.posts = response.data.posts))

                instance
                .get()
                .then(response => (this.posts = response.data.posts))
                .then((response) => {
                      this.$Progress.finish()
                  }, (response) => {
                      this.$Progress.fail()
                  })

            },

            handleClick(post) {

                var url = "/portal/" + post.id

                this.$router.push(url)
            },

            scrollToBottom() {
        this.$nextTick(() => {
            this.$refs['posts-window'].scrollTop = this.$refs['posts-window'].scrollHeight;
        });
    }

        },
        created() {
            this.getPosts()
        }
    }
</script> 

<style scoped>
.col {
    overflow-y: auto;
    max-height: 188px;
    word-wrap: break-word;
}
</style>

Vue App. vue компонент, который определяет поведение vue -progressbar: 

<template>
    <div id="app">

        <router-view></router-view>

        <vue-progress-bar></vue-progress-bar>
    </div>
</template>

<script>
export default {
  mounted () {
    //  [App.vue specific] When App.vue is finish loading finish the progress bar
    this.$Progress.finish()
  },
  created () {
    //  [App.vue specific] When App.vue is first loaded start the progress bar
    this.$Progress.start()
    //  hook the progress bar to start before we move router-view
    this.$router.beforeEach((to, from, next) => {
      //  does the page we want to go to have a meta.progress object
      if (to.meta.progress !== undefined) {
        let meta = to.meta.progress
        // parse meta tags
        this.$Progress.parseMeta(meta)
      }
      //  start the progress bar
      this.$Progress.start()
      //  continue to next page
      next()
    })
    //  hook the progress bar to finish after we've finished moving router-view
    this.$router.afterEach((to, from) => {
      //  finish the progress bar
      this.$Progress.finish()
    })
  }
}
</script>

api-ax ios. js файл, который определяет экземпляр ax ios: 

import axios from 'axios';
import app from 'app'; // import the instance

const instance = axios.create({
    baseURL: '/postlist'
});

instance.interceptors.request.use(config => {
    app.$Progress.start(); // for every request start the progress
    return config;
});

instance.interceptors.response.use(response => {
    app.$Progress.finish(); // finish when a response is received
    return response;
});

export default instance; // export axios instace to be imported in your app

1 Ответ

1 голос
/ 28 мая 2020 
i use nprogress really simple progress bar
import 'nprogress/nprogress.css' main.js
service.js(axios goes here)
import NProgress from 'nprogress' service.js

const apiClient = axios.create({
  baseURL: `http://localhost:3000`,
  withCredentials: false, // This is the default
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  },
  timeout: 15000
})
//start when you start done when you finish (i use interceptors)
 apiClient.interceptors.request.use(config => {
   NProgress.start()
   return config
 })

 apiClient.interceptors.response.use(response => {
   NProgress.done()
   return response
 })

each time api call has been made it runs the progress bar and finish when the content has been loaded.
hope it help
...