鍍金池/ 問答/HTML/ vue第三方插件如何在axios的過濾器中使用

vue第三方插件如何在axios的過濾器中使用

插件代碼

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

    }

}

在vue組件中調(diào)用:
this.$Tips.success('hello word!')
實現(xiàn)效果

clipboard.png

我現(xiàn)在如何在axios的過濾器中調(diào)用 讓當(dāng)前頁面出現(xiàn)這個彈窗呢?

clipboard.png

回答
編輯回答
話寡

main.js

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

axios

import {app} from '....main.js'
...
app.$tips ....
...
2017年10月21日 19:16
編輯回答
枕頭人

可以在 vue 實例化的時候，定義一個全局變量，然后在具體的 js 文件里使用即可。舉個例子:

window.vm = new Vue({});

在 axios 封裝的地方，使用

window.vm.$Tips.success('hello word!')
2018年7月5日 01:41
編輯回答
骨殘心
Vue.prototype.$Tips.success('hello word!')
2018年5月31日 05:56