問題場景：我們在axios中統(tǒng)一處理500、401、404狀態(tài)碼并統(tǒng)一拋出el-message提示，那么就會(huì)出現(xiàn)重復(fù)提示的問題非常的不友好。如圖：

image.png

解決辦法：

新建一個(gè)resetMessage.js文件,寫入以下代碼

// resetMessage.js
// 重置message，防止重復(fù)點(diǎn)擊重復(fù)彈出message彈框
import { Message } from 'element-ui'

let messageDom = null
const resetMessage = (options) => {
  if (messageDom) messageDom.close() // 判斷彈窗是否已存在,若存在則關(guān)閉
  messageDom = Message(options)
}
// message類型
const typeArr = ['success', 'error', 'warning', 'info']
typeArr.forEach(type => {
  resetMessage[type] = options => {
    if (typeof options === 'string') options = { message: options }
    options.type = type
    return resetMessage(options)
  }
})
export const myMessage = resetMessage

方法一：全局引入及使用

在main.js文件中引入并掛在到全局
注意：掛載自定義$message必須放在Vue.use(ElementUI)后面，才能覆蓋element-ui默認(rèn)的message，不然沒有效果

// main.js
... // 其他代碼
/ 引入重寫的resetMessage.js文件
import { myMessage } from './plugins/resetMessage'
Vue.use(ElementUI)
// 注意：掛載自定義$message必須放在Vue.use(ElementUI)后面，才能覆蓋element-ui默認(rèn)的message，不然沒有效果
Vue.prototype.$message = myMessage
...// 其他代碼

// page.vue 頁面調(diào)用
methods: {
    test() {
        this.$message({message: '測試', type: 'success'})
        setInterval(()=> { this.$message.info('測試12')},1000)
    }
}

方法二：局部引入及使用

// axios.js
import { myMessage } from '../plugins/resetMessage'
// ...其他代碼
myMessage.warning('xxxxxxxx')
// ...其他代碼