message弹出框重叠优化 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直接就把简写格式给覆盖了，但是如果是标准写法是覆盖不了的，不仅不会提示消息而且控制台还会报错，所以局限性就在这里，如果想要使用的话，还是需要将标准写法改成简写才可以。
【message弹出框重叠优化】本文参考文档
https://blog.csdn.net/dongguan_123/article/details/101290164