message弹出框重叠优化

在用到element ui时，message消息弹出提示可以明确告知ajax请求的结果，但是当一个项目文件中一次性请求多次时并且同时报错，多条报错的提示框不停的叠加出现在屏幕上，也很让人恼火；
那么今天呢，就是针对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;

注意一下先后顺序，可以看到message是挂载在vue实例上的；
全局调用方法：

this.$message.error('hello') 

或者

this.$message.error({
message:'hello',
duration: 3 * 1000,
showClose: true,
onClose:this.onClose
})

tips:
还有点小建议就是，如果是在某一个js内单独需要调用重写的message的话，比如ajax请求的封装，需要对某些固定code进行消息提示；这时候呢就需要将vue引入，其实是和main.js引入是一样的，然后使用message进行提醒。
总结：
如果在项目初期其实是没有多大影响的，但是进行到项目中后期，由于多人开发可能对于element ui的message组件使用方式各有不同；有的同学使用了简写这当然没有问题，重写的js直接就把简写格式给覆盖了，但是如果是标准写法是覆盖不了的，不仅不会提示消息而且控制台还会报错，所以局限性就在这里，如果想要使用的话，还是需要将标准写法改成简写才可以。

本文参考文档
https://blog.csdn.net/dongguan_123/article/details/101290164