封装 Element-UI中的Message，实现相同消息提示只弹一个

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

1.新建一个js文件，比如element_api.js

/* eslint-disable */
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) {
    console.log('message options:',options)
    if (single) {
      //获取页面所有已经存在的message
      let doms = document.getElementsByClassName('el-message');
      //el-message__content
      //设置值控制显示当前message
      let canShow = true;
      //遍历获取到的message DOM集合
      for( let i=0; i<doms.length; i++){
        //如果页面已存在的message中有显示文本和当前message相同的情况，canShow设置为false
        if(options == doms[i].getElementsByClassName('el-message__content')[0].innerHTML){
          canShow = false;
        }
      }
      //如果页面不存在message或者canShow==true，则正常执行该message
      if(doms.length === 0 || canShow){
        Message[type](options)
      }
    } else {
      Message[type](options)
    }
  }
}

export {
  ElMessage
}

2.使用方法

(1) 作为vue实例的属性来调用，跟element一样

//在main.js中引入
import { ElMessage } from '@/assets/js/element_api.js'
Vue.prototype.$message = new ElMessage()
//接下来就可以在组件通过 this.$message    的方式调用了

(2) 直接使用,比如我在axios拦截器js文件中使用

import { ElMessage } from '@/assets/js/element_api.js'
let Message = new ElMessage()

//使用
// http响应拦截器
axios.interceptors.response.use(res => {
  if(res.data.error == 5004){
    //登录失效
    Message.error('登录失效，请重新登录!')
    router.push('/')
  }
  return res
}