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

相关推荐
眠りたいです21 小时前
基于脚手架微服务的视频点播系统-数据管理与网络通信部分的预备工作
c++·qt·ui·微服务·云原生·架构·媒体
油炸自行车2 天前
【Qt】编写Qt自定义Ui控件步骤
开发语言·c++·qt·ui·自定义ui控件·qt4 自定义ui控件
IT古董2 天前
Vue + Vite + Element UI 实现动态主题切换:基于 :root + SCSS 变量的最佳实践
vue.js·ui·scss
yuanpan4 天前
认识跨平台UI框架Flutter和MAUI区别,如何选。
flutter·ui·maui
EndingCoder4 天前
Electron 高级 UI:集成 React 或 Vue.js
react.js·ui·electron·前端框架
我命由我123455 天前
Word - Word 的 5 种视图(页面视图、阅读视图、Web 版式视图、大纲视图、草稿视图)
ui·word·excel·photoshop·表格·ps·美工
CodingCos5 天前
【芯片设计-信号完整性 SI 学习 1.1.1 -- Unit Interval,比特周期】
学习·ui·si 比特周期
开开心心loky5 天前
[iOS] ViewController 的生命周期
macos·ui·ios·objective-c·cocoa
我命由我123455 天前
Excel 表格 - Excel 减少干扰、专注于内容的查看方式
学习·ui·excel·photoshop·表格·ps·美工
我命由我123455 天前
Excel 表格 - Excel 单元格添加边框
学习·ui·excel·课程设计·photoshop·ps·美工