解決引用Element UI 導致彈出多個message消息提示的問題

寫在前面

在項目中使用element-ui時，message彈框功能是必須使用的，有時會在點擊按鈕時提示無權限，或者請求報錯時給出適當提示，但是重復點擊按鈕或者同一個頁面多個請求同時報錯時（如圖所示），就不美觀了。可以看到，element-ui是動態往頁面根節點插入message元素來實現彈框效果的，都擁有el-message屬性，那么我們就可以通過判斷頁面中message的個數來決定要不要彈出第二個提示框，這就需要重新寫一下element-ui的message。

 解決方案

1、重寫 resetMessage.js，具體如下：

　 在src/utils（文件所在路徑可以根據自身需要創建）下新建一個文件 resetMessage.js，文件內容如下：

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

2、main.js中引入重寫的 resetMessage.js，具體操作，參看下圖：

 需要編寫的代碼如下：

import { message } from '@/utils/resetMessage'  // 引入resetMessage

Vue.prototype.$message = message // 重寫message提示框 注意：此行代碼一定要放在Vue.use(ElementUI)后面，否則不生效

3、在Vue頁面中使用

第一種方式：

this.$message.error(response.message);

第二種方式：

this.$message({type:success,message:'提示內容'});