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

标签：默认值 ElementUI options UI Message Element type 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: '操作成功！'}); 

标签：默认值,ElementUI,options,UI,Message,Element,type,message
From： https://www.cnblogs.com/liushihong21/p/17545474.html