解决ElementUi 2.16.x版本 notifycation通知框 onClose事件无法区分自动关闭还是手动关闭问题。

Element UI 2.16.x 版本的 Notification 组件的 onClose 事件本身不提供是否是自动关闭的信息。但是,你可以通过一些方法来解决这个问题。

一种方法是使用一个标志来跟踪通知是手动关闭还是自动关闭。例如,你可以在关闭之前设置一个标志,并在 onClose 事件中检查这个标志。

下面是一个简单的示例:




// 引入 Notification
import { Notification, MessageBox } from 'element-ui';
 
// 创建 Notification 实例
const notify = (message, duration = 3000) => {
  let timer = null;
  const close = () => {
    clearTimeout(timer);
    Notification.closeAll();
  };
 
  const manualClose = () => {
    clearTimeout(timer);
    // 手动关闭的逻辑
  };
 
  const instance = Notification({
    title: '通知',
    message,
    duration,
    onClose: close, // 统一关闭逻辑
  });
 
  // 如果手动设置 duration 为 0,则认为是手动关闭
  if (duration === 0) {
    MessageBox.confirm('确认关闭通知?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      manualClose();
    }).catch(() => {
      // 用户取消,重新开始计时
      timer = setTimeout(() => {
        instance.close();
      }, duration);
    });
  } else {
    timer = setTimeout(() => {
      manualClose();
    }, duration);
  }
 
  return instance;
};
 
// 使用 notify 函数发送通知
notify('这是一条自动关闭的通知', 3000);
notify('这是一条不会自动关闭的通知', 0);

在这个示例中,我们创建了一个 notify 函数,它接收一个消息和一个持续时间。如果指定了持续时间,并且不是手动设置为0,则通知会在指定时间后自动关闭。如果设置为0,则会显示一个确认对话框,用户可以选择关闭通知。通过这种方式,我们可以在 onClose 事件中统一处理关闭逻辑,并且可以通过检查是否用户手动触发关闭来区分是自动关闭还是手动关闭。

最后修改于:2024年08月27日 18:23

评论已关闭

推荐阅读

DDPG 模型解析,附Pytorch完整代码
2024年11月24日
DQN 模型解析,附Pytorch完整代码
2024年11月24日
AIGC实战——Transformer模型
2024年12月01日
Socket TCP 和 UDP 编程基础(Python)
2024年11月30日
python , tcp , udp
如何使用 ChatGPT 进行学术润色?你需要这些指令
2024年12月01日
AI
最新 Python 调用 OpenAi 详细教程实现问答、图像合成、图像理解、语音合成、语音识别(详细教程)
2024年11月24日
ChatGPT 和 DALL·E 2 配合生成故事绘本
2024年12月01日
omegaconf,一个超强的 Python 库!
2024年11月24日
【视觉AIGC识别】误差特征、人脸伪造检测、其他类型假图检测
2024年12月01日
[超级详细]如何在深度学习训练模型过程中使用 GPU 加速
2024年11月29日
Python 物理引擎pymunk最完整教程
2024年11月27日
MediaPipe 人体姿态与手指关键点检测教程
2024年11月27日
深入了解 Taipy:Python 打造 Web 应用的全面教程
2024年11月26日
基于Transformer的时间序列预测模型
2024年11月25日
Python在金融大数据分析中的AI应用(股价分析、量化交易)实战
2024年11月25日
AIGC Gradio系列学习教程之Components
2024年12月01日
Python3 `asyncio` — 异步 I/O,事件循环和并发工具
2024年11月30日
llama-factory SFT系列教程:大模型在自定义数据集 LoRA 训练与部署
2024年12月01日
Python 多线程和多进程用法
2024年11月24日
Python socket详解,全网最全教程
2024年11月27日