在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)就可以知道原因
在vue项目中的main.js中直接使用element-ui中的Message 消息提示、MessageBox 弹框、Notification 通知的更多相关文章
- LostRoutes项目日志——在main.js中添加多分辨率适配
初始的Cocos2d-JS项目中的main.js代码的内容为: /** * A brief explanation for "project.json": * Here is th ...
- vue项目接口管理,所有接口都在apis文件夹中统一管理
参考:https://www.codercto.com/a/53432.html 在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文 ...
- vue项目工具文件utils.js javascript常用工具类,javascript常用工具类,util.js
vue项目工具文件utils.js :https://blog.csdn.net/Ajaxguan/article/details/79924249 javascript常用工具类,util.js : ...
- 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法
好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...
- Element UI 中组件this.$message报错
最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- elementUI MessageBox弹框 <el-dialog>弹框如果出现input的type属性为password。项目中用到日期组件的地方会报错
ElementUI:项目中如果用到MessageBox弹框的输入框input且type为password,以及用到<el-dialog>里面用到input且type为password.此时 ...
- vue项目中,main.js,App.vue,index.html如何调用
1.main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2.App.vue是我们的主组件,所有页面都是在App.vue下进行切换的.其实你也可以理解为所有的路由也是App. ...
随机推荐
- 判断浏览器是否ie6
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) { ...
- Memcached的安装与常用命令
一.概述 MSM:Memcached-Session-ManagerMemcached是一款高性能.分布式的内存对象缓存系统 二.安装Memcached 在安装Memcached之前,我们需要先安装上 ...
- 重新渲染layui的radio
修改后添加这一段 layui.use('form', function() { var form = layui.form; form.render(); }); 也可以用官方的方法:https:// ...
- 总结几个最近处理问题中使用http协议的代码
demo1:几个不同的http请求方式总结: ----------------------------------------------------------------------------- ...
- 如何写出优美的 C 代码 面向对象的 C
基础知识 结构体 除了提供基本数据类型外,C 语言还提供给用户自己定制数据类型的能力,那就是结构体,在 C 语言中,你可以用结构体来表示任何实体.结构体正是面向对象语言中的类的概念的雏形,比如: ty ...
- APP 和小程序中通过日期格式获取时间戳的一个bug
介绍一下背景:业务逻辑就不多说了,就说关键出问题的一步,需要将 2019-10-10 这个格式转换为时间戳.在不同平台不同场景下问题还很怪异 app上:ios 安卓线上的都有问题 ios模拟器没问题 ...
- 如何查看USB是不是3.0版本
打开设备管理器 找到>便携设备 对应U盘,打开属性>查看详细信息>如果设备描述为Data Traveler 3.0 那么这就是3.0的U盘
- wordpress5.0+中 Notice: Undefined index: HTTP_REFERER 问题解决
都说现在搭网站很简单了,但真遇到问题了还真不一定能解决. 这次搭建的网站是用的wordpress版本5.0.4,以为操作和以前的低版本一样,结果做出来还是遇到问题了. 网站搭好后,首页总在顶端出现一行 ...
- Linux (x86) Exploit 开发系列教程之二(整数溢出)
(1)漏洞代码 //vuln.c #include <stdio.h> #include <string.h> #include <stdlib.h> void s ...
- sql注入测试(1)---概念概述
在进行java web 测试时,经常会忽略的测试种类就是sql注入测试,这类缺陷造成的原因是开发技术在这方面欠缺的表现,虽然不常见,但一旦有这类缺陷,就很因此对运营的数据造成很多不必要的损失,所以,还 ...