解决Element 中 Message 消息提示 连续点击 多弹窗问题

问题如图所示：

预期解决效果： 每次只弹出一个。

解决办法： 重写 $message

直接上代码

// resetMessage.js
/*
* 重写this.$message, 防止连续点击多次弹窗
* 调用样例: this.$message.info('xxx')
* */
import {Message} from 'element-ui';
const showMessage = Symbol('showMessage');
class DonMessage {
    success (options, single = true) {
        this[showMessage]('success', options, single)
    }
    warning (options, single = true) {
        this[showMessage]('warning', options, single)
    }
    info (options, single = true) {
        this[showMessage]('info', options, single)
    }
    error (options, single = true) {
        this[showMessage]('error', options, single)
    }

    [showMessage] (type, options, single) {
        if (single) {
            // 判断是否已存在Message
            if (document.getElementsByClassName('el-message').length === 0) {
                // 修改参数
                if(type === 'error' || type === 'warning'){
                    options = {
                        message: options,
                        duration: 3500,
                        showClose: true
                    };
                } else {
                    options = {
                        message: options,
                        duration: 2000,
                        showClose: true
                    };
                }
                Message[type](options)
            }
        } else {
            options = {
                message: options,
                duration: 2000,
                showClose: true
            };
            Message[type](options)
        }
    }
}
export const newMessage = new DonMessage();

重写后在main.js 中覆盖：

//main.js
import {newMessage} from  '@/assets/js/resetMessage.js';
// 重写$message
Vue.prototype.$message = newMessage;

调用样例：

this.$message.success('操作成功');

结果： 重写后可完美解决此问题。