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

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

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

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

javascript 复制代码
// 假设我们有一个全局变量来存储当前的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() 手动关闭所有实例

相关推荐
Larry_Yanan5 小时前
QML学习笔记(四十四)QML与C++交互:对QML对象设置objectName
开发语言·c++·笔记·qt·学习·ui·交互
偶尔的鼠标人7 小时前
Avalonia 的命令基类和通知基类备份
ui·mvvm·avalonia
Larry_Yanan9 小时前
QML学习笔记(四十五)QML与C++交互:信号槽的双向实现
c++·笔记·qt·学习·ui·交互
低调小一11 小时前
KuiklyUI 科普:UI 如何映射到 Android View 并完成渲染
android·windows·ui
张人玉13 小时前
C#WPF如何实现登录页面跳转
ui·c#·wpf
张人玉14 小时前
C#WPF如何跳转页面
笔记·ui·c#·wpf
猫林老师16 小时前
HarmonyOS测试与上架:单元测试、UI测试与App Gallery Connect发布实战
ui·单元测试·harmonyos
专注VB编程开发20年1 天前
B.NET编写不阻塞UI线程的同步延时
ui·.net·vb.net·doevents
渡我白衣2 天前
未来的 AI 操作系统(三)——智能的中枢:从模型到系统的统一
人工智能·深度学习·ui·语言模型·人机交互
Element_南笙2 天前
吴恩达新课程:Agentic AI(笔记2)
数据库·人工智能·笔记·python·深度学习·ui·自然语言处理