element-plus的message封装

1.resetMessage.js （重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法）

// 重置message，防止重复点击重复弹出message弹框
import { ElMessage } from 'element-plus';

let messageInstance = null;

const resetMessage = (options) => {
	if (messageInstance) {
		messageInstance.close();
	}
	messageInstance = ElMessage(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.index.js   增加custom-class属性方便修改样式 （ ⚠️最好不要把message放到根节点）

import { message } from '@/utils/resetMessage.js';

export const Message = (type, payload, duration, offset) => {
	message[type]({
		'message': payload,
		'custom-class': 'className',
		'offset': offset || 56,
		'duration': duration || 2000,
		'appendTo': document.getElementsByClassName('className')[0]
	});
};

 3.引用

import { Message } from "@/utils/index.js";

Message('success', '我是一条提示消息');