全局修改elementUI的$message的显示时间

需求：项目中用到的$message消息提示的方式，但是停留时间过长。

如果对每一个message方法都去配置duration会太麻烦，因此 进行全局的一个配置。

PS：单个配置方法：

根据element API文档，设置duration控制 消息框停留时间。

 

 

 全局配置方法：

//在main.js中添加配置

//引入组件
import {Message} from 'element-ui'

//注意：这里使用的$message,所以在使用时候也是this.$message
Vue.prototype.$message = function(msg){
  return Message({
    message: msg,
    duration: 3000
  })
}
//分别对success、warning和error等样式进行设置
Vue.prototype.$message.success = function (msg) {
  return Message.success({
    message: msg,
    duration: 3000
  })
}
Vue.prototype.$message.warning = function (msg) {
  return Message.warning({
    message: msg,
    duration: 3000
  })
}
Vue.prototype.$message.error = function (msg) {
  return Message.error({
    message: msg,
    duration: 1500
  })
}

使用时候，直接通过以下方式调用即可：

this.$message.error('失败');
this.$message.success('成功');
this.$message.warning('警告');

遇坑：
由于项目中 多人开发，消息提示的写法也不同，当遇到以下写法时候：

this.$message({ type:'error', message: '失败'} );
this.$message({ type:'success', message:'成功'} );
this.$message({ type:'warning', message:'警告'} );

分析：上面所提到的全局配置的函数方法：

Vue.prototype.$message = function(msg){
  //这时候拿到的是一个msg对象，即：{ type:'error', message: '失败'}
  return Message({
    message: msg,
    duration: 3000
  })
}

因此根据自己所需要的做出了以下修改：

 

 

Vue.prototype.$message = function(msg){
  //根据msg对象中的type类型判断消息提示的类型
  let msgObj = {
    message:msg.message?msg.message:msg,
    duration: 3000
  }
  let msgType = msg.type || ""
  switch(msgType) {
    case 'success':
      return Message.success(msgObj);
      break;
  }
    case 'warning':
      return Message.warning(msgObj);
      break;
  }
    case 'error':
      return Message.error(msgObj);
      break;
  }
    default:
      return Message(msgObj);
  }
}    

这种情况可兼容不同写法的消息提示。

 补：

通过代码形式关闭message消息框

//调用message的时候，用a接收一下它的实例
const a = this.$message({
  showClose:false,
  message:'请稍候',
  duration:0,
  customClass:'msg-style',
  iconClass:'el-icon-warning'
});
//用实例调用其close方法
a.close()

引：

全局修改elementUI的$message的持续时间

全局修改elementUI的$message默认显示时间的方法