前端消息提示优化：基于Element UI Message组件的单例消息工具

1let messageInstance = null;
2
3const message = {
4  // 不同类型的消息方法
5  info(options) {
6    return this._message(options, 'info');
7  },
8  success(options) {
9    return this._message(options, 'success');
10  },
11  warning(options) {
12    return this._message(options, 'warning');
13  },
14  error(options) {
15    return this._message(options, 'error');
16  },
17  
18  // 核心消息方法
19  _message(options, type) {
20    // 如果已有消息，先关闭它
21    if (messageInstance) {
22      messageInstance.close();
23    }
24    
25    // 处理配置...
26    
27    // 创建新的消息实例
28    messageInstance = Message(config);
29    return messageInstance;
30  }
31};

1import messageUtil from '@/utils/messageUtil';
2
3// 简单字符串形式
4messageUtil.success('操作成功');
5
6// 对象形式，可自定义更多选项
7messageUtil.error({
8  message: '操作失败，请重试',
9  duration: 3000
10});
11
12// 默认调用（不指定类型）
13messageUtil('这是一条消息');

1// 自定义显示时间
2messageUtil.info({
3  message: '正在处理...',
4  duration: 0 // 不自动关闭
5});
6
7// 手动关闭
8const msg = messageUtil.warning('请等待...');
9setTimeout(() => {
10  msg.close();
11}, 1000);

1let messageInstance = null;
2
3// 创建前检查并关闭已有实例
4if (messageInstance) {
5  messageInstance.close();
6}
7
8// 创建新实例并保存引用
9messageInstance = Message(config);

1const config = {
2  duration: 2000
3};
4
5if (typeof options === 'string') {
6  config.message = options;
7  config.type = type;
8} else if (typeof options === 'object') {
9  Object.assign(config, options);
10}

1const messageUtil = (options) => message._message(options);
2Object.assign(messageUtil, message);