element-ui使用Message，出现相同消息提示时只弹出一个的解决方案

最近在项目的使用过程中，出现了网络异常时所有接口同时报了同样的错误消息提示，所以为了解决这个问题决定要出现相同的消息时只弹出一个提示框。

在这里我找到了以下两篇文章：
https://blog.csdn.net/dongguan_123/article/details/101290164
https://blog.csdn.net/Linho/article/details/105856686

创建一个js文件

/**重写elemen-ui的message，防止出现同一时间弹出多个相同信息的message弹框 */
import { Message } from 'element-ui';
const resetMessage =(options) => {
  let doms = document.getElementsByClassName('el-message');
  let canShow = true;
  for( let i=0; i<doms.length; i++){
    if(options.message == doms[i].getElementsByClassName('el-message__content')[0].innerHTML){
      canShow = false;
    }
  }
  if(doms.length === 0 || canShow){
    Message(options)
  }
};
['error','success','info','warning'].forEach(type => {
  resetMessage[type] = options => {
    if(typeof options === 'string') {
      options = {
        message:options
      }
    }
    options.type = type
    return resetMessage(options)
  }
})
export const message = resetMessage

main.js中引入

//在main.js中引入
import Element from 'element-ui';
import { message } from './utils/resetMessage';
Vue.use(Element)
// 挂载自定义的message
Vue.prototype.$message = message;