VUE重写全局ElemenUI的$messsage

为什么头顶越来越秃？

还不是因为客户的要求越来越多！

一个快完成的项目

要求所有的提示框消失时间延长，并且可以手动关闭

这并没有什么

但是100、200个文件里都用到$message

一个一个改要哭哦

但是！

看了Element 文档发现，Element 已经为 Vue.prototype 添加了全局方法 $message，我们只需要全局重写 $message 即可

简直不要太开心~~

上代码

// custom-$message.js
import ElementUI from 'element-ui';
export default {
  install(Vue, options) {
    Vue.prototype.$message = function(msg, type) {
      ElementUI.Message({
        message: msg,
        duration: 10000,
        showClose: true,
        type: type
      });
    };
    Vue.prototype.$message.error = function(msg) {
      ElementUI.Message({
        message: msg,
        duration: 10000,
        showClose: true,
        type: 'error'
      });
    };
    Vue.prototype.$message.warning = function(msg) {
      ElementUI.Message({
        message: msg,
        duration: 10000,
        showClose: true,
        type: 'warning'
      });
    };
    Vue.prototype.$message.success = function(msg) {
      ElementUI.Message({
        message: msg,
        duration: 10000,
        showClose: true,
        type: 'success'
      });
    };
    Vue.prototype.$message.close = function() {
      return ElementUI.Message.close();
    };
    Vue.prototype.$message.closeAll = function() {
      return ElementUI.Message.closeAll();
    };
  }
};

然后main.js中引入就行啦

import ElementUI from 'element-ui';
import message from './custom-$message';
.....

Vue.use(ElementUI);
Vue.use(message);
.....

注意：Vue.use(message)要放在Vue.use(ElementUI)的后面哦！

以上！