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();  
  }  
}

注意：

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

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

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