Element UI 短时间内 Message 消息弹出多次解决方案

一般在项目中，都会封装请求，在项目中会统一封装一个错误 message 提示，在某些页面调接口，若是同一时间内都失败，会不断弹出提示，例如:

这种同一类型的 message 可以合并成为一个，用户体验会更好

思路

节流，检测 message 的类型是否一致，以及 提示内容 是否一致。如果类型不一致，并且内容也不一致，才允许第 2 条 message 弹出。

代码实现

import { Message } from "element-ui";

const showMessageFunc = function () {
  const messageList = [];
  return function (options) {
    const index = messageList.findIndex(
      (item) => item.type === options.type && item.message === options.message
    );
    if (index >= 0) {
      return messageList[index].$ele;
    }
    const ele = Message(options);
    messageList.push({
      type: options.type,
      message: options.message,
      $ele: ele,
    });
    setTimeout(() => {
      messageList.splice(index, 1);
    }, options.duration || 3000);
    return ele;
  };
};
const showMessage = showMessageFunc();

const OnceMessage = function (options) {
  if (
    !["[object Object]", "[object String]", "[object Number]"].includes(
      Object.prototype.toString.call(options)
    )
  ) {
    options = {
      message: "",
    };
  }
  if (["string", "number"].includes(typeof options)) {
    options = {
      message: `${options}`,
    };
  }
  return showMessage(options);
};

["success", "warning", "info", "error"].forEach((type) => {
  OnceMessage[type] = (options) => {
    if (
      !["[object Object]", "[object String]", "[object Number]"].includes(
        Object.prototype.toString.call(options)
      )
    ) {
      options = {
        message: "",
      };
    }
    if (["string", "number"].includes(typeof options)) {
      options = {
        message: `${options}`,
      };
    }
    options.type = type;
    return OnceMessage(options);
  };
});

OnceMessage.close = Message.close;
OnceMessage.closeAll = Message.closeAll;

export default OnceMessage;