解决element-ui message在短时间内多次弹出的问题

解决element-ui message在短时间内多次弹出的问题

使用element-ui的时候经常遇到一个页面会同时调N个接口，或者短时间内频繁点击某个接口，message组件会连续弹出，占到满屏的情况。大多数时候消息提示的内容是重复的，从用户角度来说，体验会很差。用户只需要知道一次错误消息就好了。

并且这个问题需要全局去处理，因为一个项目里用到message组件的地方太多了，不可能都单独去处理。

主要思路

整体上使用到了节流的思路，判断message的类型是否一致，和判断提示内容是否一致。如果类型不一致，且内容也不一致，才允许第2条message弹出。

附上代码

// 通过节流来控制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 MyMessage = 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 => {
  MyMessage[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 MyMessage(options);
  };
});

MyMessage.close = Message.close;
MyMessage.closeAll = Message.closeAll;

export default MyMessage;

另有一篇修改viewui的message频繁弹出的方案可移步主页查看。