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

和在vue文件中使用不同,是因为你在vue中可以从this.maeeage调用,但是在main.js中会提示你:

undefined

一般是使用axios拦截器的时候会用到:

//引用
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);
});

使用的时候直接

前面加上ElementUI

ElementUI.Message({
        message: '恭喜你,这是一条成功消息',
        type: 'success'
    });

拦截器例子,每次请求之前:用来验证token是否还有效

axios.interceptors.response.use(response => {
    let count = 0
        // console.log("++++++++打印看看+++++++++",response)
        // console.log("+++++++++++++++++",response.data.code)
    if (response.data.code == 403) {
        // alert("当前登录已失效")
        ElementUI.Message({
            message: '当前登录已失效,请重新登录',
            type: 'error'
        });
        router.replace({ path: '/login' })
    }
    return response;
}, error => {
    return Promise.reject(error.response.data)  //返回接口返回的错误信息
})
Logo

前往低代码交流专区

更多推荐