element-ui弹出多个message的问题处理

朱雀 2023-02-12 08:28 1阅读 0赞

重写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;

方法二：弹出前判断是否有相同弹出框，若有则关闭它再弹出新的

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

调用方法跟方法一一致