elementUI 重置 message，防止重复点击重复弹出 message 弹框

一、问题描述

• 问题描述：重复点击会重复弹出 message 弹框

二、解决方案

• 第一步：项目工程 src 中，新建 utils 文件夹，新建 resetMessage.js 文件，代码如下：

// 重置 message，防止重复点击重复弹出 message 弹框
import { Message } from 'element-ui';

let messageInstance = null;
const resetMessage = options => {
  // 如果弹窗已存在先关闭
  if (messageInstance) messageInstance.close();
  messageInstance = Message(options);
};

const typeArr = ['success', 'warning', 'info', 'error'];
typeArr.forEach(type => {
  resetMessage[type] = options => {
    if (typeof options === 'string') options = { message: options };
    options.type = type;
    return resetMessage(options);
  };
});
const message = resetMessage;

export default message;

• 第二步：看自己项目工程中 elementUI 是全局引入，还是按需引入？
• ①如果是全局引入，main.js 文件中添加如下代码：

// 重置 message 弹窗
import message from '@/utils/resetMessage.js'
Vue.prototype.$message = message

• ②如果是按需引入，src-plugins-element.js 文件中添加如下代码：

// 重置 message 弹窗
import message from '@/utils/resetMessage.js'
Vue.prototype.$message = message