vue项目中重写$message使得多次点击时message提示只显示一条

elementUI中的message插件，当点击按钮报错，用户多次点击时，页面会出现多个错误的提示信息，用户使用效果不好。

覆写方法如下：

1. 新建rewrite文件夹，在文件夹中新建message.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

2. 在main.js中引入message.js文件，挂载自定义message必须放在Vue.use(ElementUI)后面，才能覆盖element-ui默认的message

import {message} from './rewrite/message.js';
			...
Vue.use(ElementUI)
Vue.prototype.$message = message;

3.在页面中正常使用即可。

this.$message.error('系统错误，请联系管理员')

喜欢的点赞哟