adi_cae_web/src/utils/message.js

/*
element-ui中的message在实际使用过程中很多时候会遇到，相同的message会在短时间内同时出现在页面上，这种情况下是没有必要的。比如一个错误信息提示被放在定时器中进行：定时调用某个接口，然后这个接口会返回一个message的话，在定时器时间设置很短的情况下，就会出现短时间内弹出很多相同的message。我们可以通过重写element-ui的message来解决这个问题。
*/
import { Message } from 'element-ui'

const showMessage = Symbol('showMessage')
/**
 * 封装element-ui message方法，只有在页面没有message或者没有相同message的情况下才弹出该message
 */
class ElMessage {
  success(options, single = true) {
    this[showMessage]('success', options, single)
  }
  warning(options, single = true) {
    this[showMessage]('warning', options, single)
  }
  info(options, single = true) {
    this[showMessage]('info', options, single)
  }
  error(options, single = true) {
    this[showMessage]('error', options, single)
  }
  /* eslint-disable */
  [showMessage](type, options, single) {
    if (single) {
      let canShow = true;//设置值控制显示当前message
      let messageArr = document.getElementsByClassName('el-message');//获取页面所有已经存在的message
      //遍历获取到的message DOM集合,如果页面已存在的message中有显示文本和当前message相同的情况，canShow设置为false
      for (let i = 0; i < messageArr.length; i++) {
        if (options == messageArr[i].getElementsByClassName('el-message__content')[0].innerHTML) {
          canShow = false;
        }
      }
      //如果页面不存在message或者canShow==true，则正常执行该message
      if (messageArr.length == 0 || canShow) {
        Message[type](options)
      }
    } else {
      Message[type](options)
    }
  }
}

export {
  ElMessage
}