Vue-toastification如何手动关闭通知？新通知弹出时移除旧通知

手动关闭单个Toast的正确方式 #

Vue-toastification调用$toast.xxx()时会返回对应的toast实例，你需要保存这个实例，再调用它的close()方法才能生效——之前直接用toast.close()应该是没拿到正确的实例。示例：

// 保存toast实例
const myToast = this.$toast.info("Please hold on a moment, your file is being downloaded.");

// 任意时机手动关闭
myToast.close();

实现「新Toast弹出时自动移除第一个旧Toast」 #

要实现这个需求，只需要维护一个存储toast实例的队列，每次弹出新Toast前，检查队列是否有旧实例，关闭并移除第一个，再把新实例加入队列即可。

在组件里可以这么写：

export default {
  data() {
    return {
      toastQueue: [] // 用来存toast实例的队列
    };
  },
  methods: {
    showDownloadToast() {
      // 如果队列里有旧toast，先关闭第一个并移除
      if (this.toastQueue.length > 0) {
        this.toastQueue[0].close();
        this.toastQueue.shift();
      }
      // 创建新toast并加入队列
      const newToast = this.$toast.info("Please hold on a moment, your file is being downloaded.");
      this.toastQueue.push(newToast);
    }
  }
};

之后每次需要弹出通知时，调用this.showDownloadToast()就行，新通知弹出时最旧的那个会被立刻关闭，不用依赖固定超时时间。

为什么之前的close()/remove()没生效？ #

因为你没有获取到对应toast的实例对象——直接调用toast.close()是无效的，必须是调用this.$toast.info()（或其他类型）返回的具体实例，它才包含有效的close()方法。

内容的提问来源于stack exchange，提问作者jop frenken