处理element-ui message组件多次弹出问题

一个页面请求多个接口时,如果多个接口返回异常或者错误时,message组件会多次弹出。这里对element-ui 的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)
};
['error', 'success', 'info', 'warning'].forEach(type => {
  resetMessage[type] = options => {
      if (typeof options === 'string') {
          options = {
              message: options
          }
      }
      options.type = type
      return resetMessage(options)
  }
})

export const message = resetMessage

调用:

import { message } from "@/utils/resetMessage"

 message({
        message: error.response.data.message,
        type: "error",
        duration: 5 * 1000,
        showClose: true
});

推荐阅读更多精彩内容