重写element ui 中的message提示框，解决页面上显示过多message提示问题,按需引入message后，页面刷新出现空白提示

在使用了message的地方，多次点击就会出现很多个提示，影响用户使用

我们可以通过重写message来解决这个问题
在main.js中写入

import { Message } from 'element-ui'
// 为了实现Class的私有属性
const showMessage = Symbol('showMessage')
/** 
 *  重写ElementUI的Message
 *  single默认值true
 */
class DonMessage {
  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)
  }

  [showMessage] (type, options, single) {
    if (single) {
      // 判断是否已存在Message
      // 设置页面上同时出现message提示的个数
      if (document.getElementsByClassName('el-message').length <= 3) {     
        Message[type](options)
      }
    } else {
      Message[type](options)
    }
  }
}
Vue.use(Message)
Vue.prototype.$message = new DonMessage()

按需引入message后刷新页面会弹出一个空白提示

解决办法

//Vue.use(Message)
Vue.component(Message.name, Message)