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() 手动关闭所有实例

相关推荐
Element_南笙18 小时前
吴恩达新课程:Agentic AI(笔记2)
数据库·人工智能·笔记·python·深度学习·ui·自然语言处理
SmartSoftHelp开发辅助优化19 小时前
C# WinForm 编程高手:程序,进程,线程。程序,窗体,UI,后台。是如何协调工作的?深度解析>SmartSoftHelp魔法精灵工作室
microsoft·ui·c#
我命由我123451 天前
Photoshop - Photoshop 工具栏(14)抓手工具
ui·职场和发展·pdf·求职招聘·职场发展·photoshop·美工
覆东流1 天前
Photoshop修图
ui·photoshop
Kingsdesigner1 天前
告别“手绘”图表:Illustrator与XD联动的数据可视化(Data Viz)工作流
ui·adobe·信息可视化·illustrator·媒体·图表·平面设计
Larry_Yanan2 天前
QML学习笔记(四十三)QML与C++交互:上下文属性暴露
c++·笔记·qt·学习·ui·交互
知识分享小能手3 天前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
Larry_Yanan3 天前
QML学习笔记(四十二)QML的MessageDialog
c++·笔记·qt·学习·ui
Javashop_jjj3 天前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app
程序员杰哥3 天前
UI自动化测试实战:从入门到精通
自动化测试·软件测试·python·selenium·测试工具·ui·职场和发展