如何限制element-ui的message只弹出一个

页面同时出现多个提示框不是很美观，那么如何限制同一时刻仅出现一个弹窗呢？

解决方案：
每次弹窗都会出现类名为el-message的元素，通过判断该元素是否存在来限制是否弹新窗。

1）创建message.js文件，代码如下：

// message.js
import { Message } from 'element-ui'

const showMessage = Symbol('showMessage')

class gtMessage {
  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) {
      if(!document.querySelector('.el-message')) {
        Message[type](options)
      }
    } else {
      Message[type](options)
    }
  }
}

const gtMessageCase = new gtMessage()
export default gtMessageCase;

2）修改main.js文件：

import Vue from "vue";
import gtMessage from "./message"

Vue.prototype.$message = gtMessage;

3）使用message方式：
请勿直接使用this.$message(options)，因this.$message为gtMessage实例。

成功调用方式：this.$message.success(options);
失败调用方式：this.$message.error(options);
警告调用方式：this.$message.warning(options);
提示调用方式：this.$message.info(options);