全局重写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方法

const messages = ['success', 'warning', 'info', 'error'];
messages.forEach(type => {
    ElementUI.Message[type] = options => {
        if(typeof options === 'string') {
            options = {
                message: options
            };
            // 默认设置
            options.duration = 1000; // 默认值3000毫秒
            options.showClose = true; // 默认值false
            options.offset = 78; // 默认值20
        }
        options.type = type;
        return ElementUI.Message(options);
    }
});
Vue.use(ElementUI);

4、项目中调用此方法

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

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

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

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