怎么样让Element UI的Message消息提示每次只弹出一个

这个问题非常的常见，使用过Element的都知道，频繁点击Message消息提示会出现以下这种情况：

Snipaste_2020-06-12_16-31-30.png

怎么处理呢？为了防止用户频繁点击，或者频繁的提交表单给的提示，查看了官方文档确实没有提供弹出一次的功能。

解决方案：
通过对Message分析可以得知：Element UI在调用Message组件时会在HTML中插入以下代码，

单个Message的时候：

Snipaste_2020-06-12_16-37-36.png

多个Message的时候：

Snipaste_2020-06-12_16-39-51.png

这样子我们就可以通过这个元素是否存在来进行一个判断，如果存在就不要让他继续添加，这是一种思路，接下来就是代码的实现。

注意事项：
这个代码应该是在你引入element的地方写的，有些是把element单独抽出一个文件来按需引入，然后再去main.js进行引入，有的是直接在main.js直接引入element，看自己的爱好，我的是第一种情况所以我把下面的代码写到了单独抽离出来的element.js文件中。

文件结构：

Snipaste_2020-06-12_16-50-58.png

Snipaste_2020-06-12_16-53-11.png

//在element.js文件

import Vue from "vue";
import "element-ui/lib/theme-chalk/index.css";
import {Pagination,Dialog,Autocomplete,Dropdown,DropdownMenu,DropdownItem,Message} from "element-ui";

//解决Message弹出多个提示框
const showMessage = Symbol("showMessage");
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);
    }
  }
}

Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
// Vue.prototype.$message = Message;
// 命名根据需要，DonMessage只是在文章中使用
Vue.prototype.$message = new DonMessage()

调用方式

因为使用了new DonMessage()的原因，所以导致this. $message(options)的方式无法使用。所以推荐使用this.$ message.success('成功提示')或者this.$message.success(options)的方式进行调用。具体参数可以查看官方文档。

Snipaste_2020-06-12_17-10-58.png