全局重写Element UI中的Message消息提示显示时长

需求：Message消息提示显示时长过长

环境："vue": "2.6.12"、"element-ui": "^2.15.6"等

解决步骤：

1、在项目中找到main.js 文件

2、引人下面两个文件

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

 

3、重写$message方法

 1 const messages = ['success', 'warning', 'info', 'error'];
 2 messages.forEach(type => {
 3     ElementUI.Message[type] = options => {
 4         if(typeof options === 'string') {
 5             options = {
 6                 message: options
 7             };
 8             // 默认设置
 9             options.duration = 1000; // 默认值3000毫秒
10             options.showClose = true; // 默认值false
11             options.offset = 78; // 默认值20
12         }
13         options.type = type;
14         return ElementUI.Message(options);
15     }
16 });
17 Vue.use(ElementUI);

4、项目中调用此方法

this.$message.success('操作成功！');

坑点：在项目中需要都修改成上面的写法，避免如下的写法，不然会导致配置不生效。

1 this.$message({ type: 'success', message: '操作成功！'});

鉴定完毕，欢迎友友们一起交流学习！！