需求来源:向后台请求数据时后台挂掉了,后台响应就出现错误,不做处理界面就卡住了,这时需要在main.js中使用axios的响应拦截器在出现相应错误是给出提示。项目使用element-ui,就调用里面的Message 消息提示、MessageBox 弹框、Notification 通知三种方式中的一种。

  1. import Vue from 'vue';
  2. import ElementUI from 'element-ui';
  3.  
  4. // 添加响应拦截器
  5. axios.interceptors.response.use(function (response) {
  6. // 对响应数据做点什么
  7. // console.log('对响应数据做点什么')
  8. return response;
  9. }, function (error) {
  10. // 对响应错误做点什么
  11. console.log(ElementUI)
  12. //Message 消息提示
  13. ElementUI.Message({
  14. message: '恭喜你,这是一条成功消息',
  15. type: 'success'
  16. });
  17. //Notification 通知
  18. ElementUI.Notification({
  19. title: '警告',
  20. message: '这是一条警告的提示消息',
  21. type: 'warning'
  22. });
  23. //MessageBox 弹框
  24. ElementUI.MessageBox({
  25. title: '标题名称',
  26. message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
  27. });
  28. return Promise.reject(error);
  29. });
  1. Message 消息提示、MessageBox 弹框、Notification 通知等方法的调用方式和在.vue文件中时不一样的,这一点要注意,他们是ElementUI中这项方法的封装的原始方法
  1.  
  1. ElementUI.Message 对应的是this.$message方法
  1. ElementUI.Notification 对应的是this.$notify方法
  1. ElementUI.MessageBox 对应的是this.$alert方法
  1.  
  2. console.log(ElementUI)就可以知道原因

  1.  
  1.  

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

  1. LostRoutes项目日志——在main.js中添加多分辨率适配

    初始的Cocos2d-JS项目中的main.js代码的内容为: /** * A brief explanation for "project.json": * Here is th ...

  2. vue项目接口管理,所有接口都在apis文件夹中统一管理

    参考:https://www.codercto.com/a/53432.html 在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文 ...

  3. vue项目工具文件utils.js javascript常用工具类,javascript常用工具类,util.js

    vue项目工具文件utils.js :https://blog.csdn.net/Ajaxguan/article/details/79924249 javascript常用工具类,util.js : ...

  4. 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法

    好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...

  5. Element UI 中组件this.$message报错

    最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...

  6. 关于Element UI中页面样式小问题

    一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...

  7. 关于Element UI中select组件中遇到的问题

    问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

  8. elementUI MessageBox弹框 <el-dialog>弹框如果出现input的type属性为password。项目中用到日期组件的地方会报错

    ElementUI:项目中如果用到MessageBox弹框的输入框input且type为password,以及用到<el-dialog>里面用到input且type为password.此时 ...

  9. vue项目中,main.js,App.vue,index.html如何调用

    1.main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2.App.vue是我们的主组件,所有页面都是在App.vue下进行切换的.其实你也可以理解为所有的路由也是App. ...

随机推荐

  1. go json解析Marshal和Unmarshal

    Decoder: package main import ( "encoding/json" "fmt" "io" "log&qu ...

  2. mysql 表字段部分替换

    update user set `ph` = REPLACE(`ph`,'shenji.osnt.me','60.210.113.147:555');

  3. BS

  4. jquery入口函数的测试

    /*编写一个自定义的jquery框架*/ (function (window,undefined) { var njquery=function (selector ,) { return new j ...

  5. oracle 列合并成并用拼接符拼接 -- LISTAGG函数用法

    ==注:wm_concat(str1) 11g 后不支持使用== LISTAGG函数用法 select LISTAGG(name, ',') WITHIN GROUP (ORDER BY id) fr ...

  6. Python class and object

    # Python继承 class Person(object): """人""" def __init__(self, name, age) ...

  7. 个人整理Python代码实例

    1.四位数字字母验证码的生成实例 import random if __name__ =="__main__": #四位数字字母验证码的生成 checkcode="&qu ...

  8. glib系列2 APP编译

    编译命令 gcc main.c `pkg-config --cflags glib-2.0 --libs glib-2.0` 头文件 $ ls /usr/local/include/glib-2.0/ ...

  9. c语言 运算器

    #include<stdio.h> #include<stdbool.h> void menu(){ printf("************************ ...

  10. 列表初始化(list initialization)

    列表初始化啊就是大括号来初始化: 列表初始化的好处: