Based on the progressbar component of Vue3 + Vuex

vue-fluorescence-progressbar

Based on the progressbar component of Vue3 + Vuex, it supports automatic call/active call when loading the page.

use

1. Copy loading component components/ProgressBar.vueto your project

2. Copy of global functions loading assembly store/modules/progress-bar.jsto your project, and arranged in the modules in Vuex (refer store/index.js)

3. Configure routing to suit the usage scenarios you need to load:

• Active call: no need to configure routing

• Called automatically when the page loads: Reference router/index.jsconfiguration.

• First, you need to ensure that the loaded page components are loaded asynchronously:

    const routes = [
        {
            path: '/example',
            name: 'Example',
            component: () => import(/* webpackChunkName: "example" */ '../views/Example.vue')
        }
    ]

• Then configure the routing guard, open the progressbar before loading, and close the progressbar after loading:

    Router . beforeEach ( ( to ,  from ,  the Next )  =>  { 
        // When to.matched [0] ?. components.default is only function is loaded asynchronously Components page 
        IF  ( typeof  to . Matched [ 0 ] ? . Components . default  ===  'function' )  { 
            store . dispatch ( 'progressbar/start' ) 
        } 
        next ( ) 
    } )

    router.beforeResolve((to, from, next) => {
        store.dispatch('progressbar/stop')
        next()
    })

Active call

When you need to actively call, you can inject global methods in Vuex into the component:

    import { mapActions } from 'vuex'
    export default {
        methods: {
            ...mapActions({
                start: 'progressbar/start',
                stop: 'progressbar/stop'
            })
        }
    }

Then call it where the component needs:

    // Turn on progressbar 
    this . Start ( ) 
    // Turn off progressbar 
    this . Stop ( )

Configuration

You can components components/ProgressBar.vuefound within progressbar color scheme:

    $color: #23d6d6;
    $light: linear-gradient(to right, $color, #29ffff, $color);

• $color : Progress bar color

• $light : The color of the glowing animation part of the sliding on the progress bar

In some cases, you can gain benefits like this:

    $base: pink;
    $color: fade-out($base, .5);
    $light: linear-gradient(to right, $color, $base, $color);

compatibility

This component can also be used in Vue2, you only need to modify it appropriately. When using Vue2, because there are Vue instances, you can get more convenience by mounting methods on the component.

Download Details:

Author: fz6m

Source Code: https://github.com/fz6m/vue-fluorescence-progressbar

#vue3 #vue #vuejs #vuex #javascript