element-ui多个消息提示只显示最后一个

devtools/2024/9/25 0:22:21/

在使用 Element UI 的 Message 消息提示时,默认情况下,如果你连续调用多个 Message 方法,它们会依次显示,直到用户关闭或它们自动消失。但是,如果你希望只保留最后一个消息提示,即每当新消息出现时,旧的消息提示应该被关闭或替换,你可以通过手动控制来实现这一行为。

这里提供一个简单的示例,通过监听消息显示前的事件或使用全局变量来控制只显示最新的消息。不过,Element UI 的 Message API 并没有直接提供“只显示最后一个”的选项,所以我们需要借助一些额外的逻辑来实现。

以下是一个使用全局变量和定时器来模拟“只显示最后一个消息”的示例:

// 假设我们有一个全局变量来存储当前的Message实例  
let currentMessageInstance = null;  // 封装一个函数来显示消息,并处理只显示最后一个的逻辑  
function showOnlyLastMessage(message, type = 'info', duration = 3000) {  // 如果当前有消息实例,则先关闭它  if (currentMessageInstance) {  currentMessageInstance.close();  }  // 显示新的消息,并将实例保存到全局变量中  currentMessageInstance = this.$message({  message: message,  type: type,  duration: duration  });  
}  // 示例用法  
export default {  methods: {  triggerMessages() {  // 假设这些是在不同时间触发的消息  setTimeout(() => {  showOnlyLastMessage('这是第一个消息', 'warning', 5000);  }, 1000);  setTimeout(() => {  showOnlyLastMessage('这是第二个消息', 'success', 3000);  }, 2000);  setTimeout(() => {  showOnlyLastMessage('只有这个会显示!', 'info', 2000);  }, 3000);  }  },  mounted() {  // 调用方法触发消息  this.triggerMessages();  }  
}

注意:

  1. 上述代码示例中,showOnlyLastMessage 函数是假设在 Vue 组件的上下文中被调用的,因此它使用 this.$message 来调用 Element UI 的 Message 组件。如果你不在 Vue 组件内部,你可能需要另一种方式来访问 Message(例如,通过全局 Vue 实例或导入 Element 的 Message 组件)。
  2. 我们使用了 setTimeout 来模拟消息在不同时间点被触发的情况。
  3. 每当有新消息需要显示时,都会检查 currentMessageInstance 是否已经存储了一个 Message 实例。如果是,则先关闭它,然后再显示新的消息。

通过这种方式,你就可以实现只显示最后一个消息提示的功能了。

当然也可以调用 this.$message.closeAll() 手动关闭所有实例


http://www.ppmy.cn/devtools/116728.html

相关文章

算法【Java】—— 位运算

位运算总结 位运算的运算符&#xff1a;按位与&#xff08;&&#xff09;&#xff0c;按位或&#xff08;|&#xff09;&#xff0c;按位异或&#xff08;^&#xff09;&#xff0c;按位取反&#xff08;~&#xff09;&#xff0c;还有移位操作符 <<&#xff0c;>…

WEB攻防-JavaWweb项目JWT身份攻击组件安全访问控制

知识点&#xff1a; 1、JavaWeb常见安全及代码逻辑&#xff1b; 2、目录遍历&身份验证&逻辑&JWT&#xff1b; 3、访问控制&安全组件&越权&三方组件&#xff1b; 演示案例&#xff1a; JavaWeb-WebGoat8靶场搭建使用 安全问题-目录遍历&身份认…

Flink 中 Checkpoint 的底层原理和机制

Flink 的 Checkpoint 机制是 Apache Flink 在流式处理中的一个核心特性&#xff0c;保证了分布式数据流处理系统的 容错性。通过定期保存 状态快照&#xff08;checkpoint&#xff09;&#xff0c;即使在发生故障时&#xff0c;Flink 也可以恢复到之前的状态&#xff0c;确保处…

火车站高铁站站点时刻查询网站计算机毕设/动车站点时刻查询

创建一个关于火车站高铁站站点时刻查询的毕业设计项目&#xff0c;是一个非常实际且具有挑战性的任务。这样的项目不仅能帮助学生综合运用所学知识&#xff0c;还能够为用户提供便捷的服务。下面将详细说明项目的各个方面&#xff1a; 1. 需求分析 用户需求&am…

Python编码系列—Python适配器模式:无缝集成的桥梁

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

yolo介绍

YOLO&#xff08;You Only Look Once&#xff09;是一种目标检测算法。 一、主要特点 1. 速度快&#xff1a;YOLO 能够快速处理图像&#xff0c;实现实时目标检测。与其他一些目标检测算法相比&#xff0c;它在处理速度上具有明显优势&#xff0c;可以满足对实时性要求较高的应…

复选框选择示例【JavaScript】

这段代码实现的功能是一个简单的复选框示例&#xff0c;它可以进行全选、反选和取消选中操作。 实现功能&#xff1a; 1. 全选&#xff1a;当点击标签"全选"旁边的复选框时&#xff0c;该页面上所有具有"item"类的复选框都会被选中&#xff08;或者取消选…

OceanBase中Range 分区 和 Range Columns 分区

1. Range 分区和 Range Columns 分区的区别 Range 分区&#xff1a;只允许基于一个整型列&#xff08;INT 类型&#xff09;的值范围进行分区。通常适用于那些可以自然用整数来表达的值&#xff0c;如商品编号、用户 ID 等。OceanBase 限定 Range 分区的分区键为 INT 类型&…