全局修改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默認顯示時間的方法