How to use the vue third-party plug-in in the filter of axios

plug-in code

import IndexComponent from "./index";

let $vm;

export default {
    install(Vue, options) {

        const TipsController = Vue.extend(IndexComponent);

        $vm = new TipsController().$mount(document.createElement("div"));

        document.body.appendChild($vm.$el);

        let Tips = {

            info(title, time = 2) {
                this.init(title, time, "info");
            },

            success(title, time = 2) {
                this.init(title, time, "success");
            },

            warning(title, time = 2) {
                this.init(title, time, "warning");
            },

            error(title, time = 2) {
                this.init(title, time, "error");
            },

            init(title, time, type) {

                Object.assign($vm, {
                    title: title,
                    type: type,
                    show: true
                });

                setTimeout(() => {

                    $vm.show = false

                }, time * 1000)

            }
        };

        if (! Vue.prototype.$Tips) {

            Vue.prototype.$Tips = Tips;
        }

    }

}

call in the vue component:
this.$Tips.success ("hello wordings")
achieve the effect

clipboard.png

axios ?

clipboard.png

Apr.27,2021

main.js

export const app = new Vue() .....

axios

import {app} from '....main.js'
...
app.$tips ....
...

Vue.prototype.$Tips.success('hello word!')

you can define a global variable when vue is instantiated, and then use it in a specific js file. For example:

window.vm = new Vue({});

 axios 

window.vm.$Tips.success('hello word!')
Menu