一個(gè)頁(yè)面請(qǐng)求多個(gè)接口時(shí)，如果多個(gè)接口返回異常或者錯(cuò)誤時(shí)，message組件會(huì)多次彈出。這里對(duì)element-ui 的message組件做一層封裝，防止此類問(wèn)題出現(xiàn)

src/utils/resetMessage.js

/**重置message，防止重復(fù)點(diǎn)擊重復(fù)彈出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

調(diào)用：

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

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