在vue項目中的main.js中直接使用element-ui中的Message 消息提示、MessageBox 彈框、Notification 通知

需求來源：向后台請求數據時后台掛掉了，后台響應就出現錯誤，不做處理界面就卡住了，這時需要在main.js中使用axios的響應攔截器在出現相應錯誤是給出提示。項目使用element-ui，就調用里面的Message 消息提示、MessageBox 彈框、Notification 通知三種方式中的一種。

import Vue from 'vue';
import ElementUI from 'element-ui';



// 添加響應攔截器
axios.interceptors.response.use(function (response) {
    // 對響應數據做點什么
    // console.log('對響應數據做點什么')
    return response;
}, function (error) {
    // 對響應錯誤做點什么
    console.log(ElementUI)
    //Message 消息提示
    ElementUI.Message({
        message: '恭喜你，這是一條成功消息',
        type: 'success'
    });
    //Notification 通知
    ElementUI.Notification({
        title: '警告',
        message: '這是一條警告的提示消息',
        type: 'warning'
    });
    //MessageBox 彈框
    ElementUI.MessageBox({
        title: '標題名稱',
        message: '這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案'
    });
    return Promise.reject(error);
});

Message 消息提示、MessageBox 彈框、Notification 通知等方法的調用方式和在.vue文件中時不一樣的，這一點要注意，他們是ElementUI中這項方法的封裝的原始方法

ElementUI.Message 對應的是this.$message方法

ElementUI.Notification 對應的是this.$notify方法

ElementUI.MessageBox 對應的是this.$alert方法

console.log(ElementUI)就可以知道原因

 
轉載：https://www.cnblogs.com/aidixie/p/10904693.html