vue+element-ui处理弹出消息限制

在开发的过程中Message弹出过多会影响到页面展示，所以有的时候我们只支持一个弹框的出现，我们可以对其进行限制

import Vue from "vue"

import { Message } from 'element-ui'
// 为了实现Class的私有属性
const showMessage = Symbol('showMessage')
/**
 *  重写ElementUI的Message
 *  single默认值true，因为项目需求，默认只弹出一个，可以根据实际需要设置
 * options表示弹出的信息
 */
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
      if (document.getElementsByClassName('el-message').length === 0) {
        Message[type](options)
      }
    } else {
      Message[type](options)
    }
  }
}

// 引入机制调整
setTimeout(function() {
  Vue.prototype.$message = new DonMessage()
})
注意：为什么需要用symbol类型：因为弹出框用个type对于弹出都是不一样的，需要用唯一做标识

在main.js中引入

// 引入混入方法
import "./mixins/message"

使用的时候,就可以这么用了

this.$message.success("操作成功!")