vue中使用element-ui，重復點擊按鈕或多個請求同時報錯時彈出多個message彈框解決方法

專案中使用element-ui時，message彈框功能是必須使用的，有時會在點擊按鈕時提示無權限，或者請求報錯時給出適當提示：

但是重復點擊按鈕或者同一個頁面多個請求同時報錯時，就不美觀了

可以看到，element-ui是動態往頁面根節點插入message元素來實作彈框效果的，都擁有el-message屬性

那么我們就可以通過判斷頁面中message的個數來決定要不要彈出第二個提示框

這就需要重新寫一下element-ui的message

resetMessage.js

/**重置message，防止重復點擊重復彈出message彈框 */
import {
    Message
} from 'element-ui';
const showMessage = Symbol('showMessage')
class DoneMessage {
    [showMessage](type, options, single) {
        if (single) {
            if (document.getElementsByClassName('el-message').length === 0) {
                Message[type](options)
            }
        } else {
            Message[type](options)
        }
    }
    info(options, single = true) {
        this[showMessage]('info', options, single)
    }
    warning(options, single = true) {
        this[showMessage]('warning', options, single)
    }
    error(options, single = true) {
        this[showMessage]('error', options, single)
    }
    success(options, single = true) {
        this[showMessage]('success', options, single)
    }
}
export const message = new DoneMessage();

main.js引入

import {
  message
} from '@/utils/resetMessage';
、、、、
Vue.use(ElementUI)
Vue.prototype.$message = message;

全域呼叫方法：

this.$message.error('hello')或者this,$message.error({message:'hello'})

注意：掛載自定義message必須放在Vue.use(ElementUI)后面，才能覆寫element-ui默認的message，不然沒有效果

這樣就不用擔心重復點擊會彈出好多彈框了

============================================================

今天同事提出了個獲取更好體驗的方法

按先前的方法，是更具頁面中el-message的數量來決定要不要彈出下一個提示框，重復點擊按鈕時必須等上一個message隱藏了之后才能彈下一個，這就導致后續的點擊沒有反應，缺少頁面反饋，會有卡頓的錯覺，如果快速點擊不同提示的按鈕，由于第一個彈框還沒隱藏，后續不同的提示也不會展示，

此時點擊第二個按鈕，但提示依然是按鈕1的提示語

解決：

利用element-ui中message的close方法，在下一個彈框彈出前先把上一個彈框實體關閉掉

把之前的代碼改造一下：

/**重置message，防止重復點擊重復彈出message彈框 */
import {
    Message
} from 'element-ui';
const showMessage = Symbol('showMessage');
let messageInstance = null;
class DoneMessage {
    [showMessage](type, options, single) {
        if (messageInstance && single) {
            messageInstance.close()
        }
        messageInstance = Message[type](options)
        // if (single) {
        //     if (document.getElementsByClassName('el-message').length === 0) {
        //         Message[type](options)
        //     }
        // } else {
        //     Message[type](options)
        // }

    }
    info(options, single = true) {
        this[showMessage]('info', options, single)
    }
    warning(options, single = true) {
        this[showMessage]('warning', options, single)
    }
    error(options, single = true) {
        this[showMessage]('error', options, single)
    }
    success(options, single = true) {
        this[showMessage]('success', options, single)
    }
}
export const message = new DoneMessage();

這樣重復點擊的時候頁面彈框和用戶的行為有了一定的互動，體驗更好

==========================================================

2019-12-31編輯

這樣的封裝方法有一個缺陷，因為是通過new方法創建的物件，所以只能拿通過$message.error()的形式呼叫，不支持$message({})形式呼叫，參考element-ui中message方法的實作，將封裝再次優化一下

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

這樣兩種呼叫方式都支持了