前端通知系统优化：基于Element UI Notification组件的单例通知工具

1// 全局单一通知实例
2let currentNotification = null;
3
4const notify = {
5  // 不同类型的通知方法
6  info(options) {
7    return this._notify(options, 'info');
8  },
9  success(options) {
10    return this._notify(options, 'success');
11  },
12  warning(options) {
13    return this._notify(options, 'warning');
14  },
15  error(options) {
16    return this._notify(options, 'error');
17  },
18
19  // 核心通知方法
20  _notify(options, type) {
21    // 如果已有通知，先关闭它
22    if (currentNotification) {
23      currentNotification.close();
24    }
25
26    // 处理配置...
27
28    // 创建新的通知实例
29    currentNotification = Notification(config);
30
31    // 当通知关闭时，清除实例引用
32    currentNotification.onClose = () => {
33      // ...
34      currentNotification = null;
35    };
36
37    return currentNotification;
38  }
39};

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

1// 自定义关闭回调
2notifyUtil.info({
3  message: '正在处理...',
4  duration: 0, // 不自动关闭
5  onClose: () => {
6    console.log('通知已关闭');
7  }
8});
9
10// 稍后手动关闭
11const notification = notifyUtil.warning('请等待...');
12setTimeout(() => {
13  notification.close();
14}, 3000);

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

1const config = {
2  duration: 4500,
3  position: 'top-right',
4  offset: 0,
5  customClass: 'fixed-notification'
6};
7
8if (typeof options === 'string') {
9  config.message = options;
10  config.type = type;
11} else if (typeof options === 'object') {
12  Object.assign(config, options);
13  // ...
14}

1const originalOnClose = config.onClose;
2currentNotification.onClose = () => {
3  if (originalOnClose) {
4    originalOnClose();
5  }
6  currentNotification = null;
7};

1const notifyUtil = (options) => notify._notify(options);
2Object.assign(notifyUtil, notify);