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

接上篇，解决了element-ui上的message问题，那也把iview-ui同时解决了。

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

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

主要思路

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

附上代码

// 通过节流来控制message的展示
import { Message } from 'view-design';

const defaults = {
  top: 24,
  duration: 1.5
};

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

const MyMessage = {
  ...Message
};

['info', 'success', 'warning', 'error', 'loading'].forEach(type => {
  console.log(Message);
  MyMessage[type] = options => {
    if (typeof options === 'string') {
      options = {
        content: options
      };
    }
    options.type = type;
    return showMessage(type, options);
  };
});

MyMessage.message = (type, options) => {
  if (typeof options === 'string') {
    options = {
      content: options
    };
  }
  options.type = type;
  return showMessage(type, options);
};

MyMessage.config = options => {
  if (options.top || options.top === 0) {
    defaults.top = options.top;
  }
  if (options.duration || options.duration === 0) {
    defaults.duration = options.duration;
  }
  Message.config(options);
};

export default MyMessage;

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