当前位置：首页 > VUE

vue 实现toast

2026-01-07 07:28:42VUE

vue 实现 toast 的方法

在 Vue 中实现 Toast 提示功能可以通过多种方式，以下是几种常见的实现方法：

使用第三方库

Vue 生态中有许多成熟的 Toast 库，例如 vue-toastification 或 vant 的 Toast 组件。以 vue-toastification 为例：

安装依赖：

npm install vue-toastification@next

在 main.js 中引入并配置：

import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";

const options = {
  timeout: 2000,
  position: "top-right"
};

app.use(Toast, options);

在组件中使用：

this.$toast.success("操作成功！");
this.$toast.error("操作失败！");

自定义全局组件

创建一个全局的 Toast 组件并挂载到 Vue 原型上：

创建 Toast.vue 组件：

<template>
  <div v-if="show" class="toast">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      message: ""
    };
  },
  methods: {
    display(message, duration = 2000) {
      this.message = message;
      this.show = true;
      setTimeout(() => {
        this.show = false;
      }, duration);
    }
  }
};
</script>

<style>
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 4px;
  z-index: 9999;
}
</style>

在 main.js 中注册为全局方法：

import Toast from "./components/Toast.vue";

const toastCtor = Vue.extend(Toast);
const toastInstance = new toastCtor();
toastInstance.$mount();
document.body.appendChild(toastInstance.$el);

Vue.prototype.$toast = (message, duration) => {
  toastInstance.display(message, duration);
};

在组件中调用：

this.$toast("这是一个提示", 3000);

使用 Vue 的过渡动画

为 Toast 添加动画效果可以提升用户体验：

在 Toast.vue 中添加过渡：

<template>
  <transition name="fade">
    <div v-if="show" class="toast">
      {{ message }}
    </div>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

实现队列功能

当需要显示多个 Toast 时，可以添加队列功能：

修改 Toast.vue 的 data 和 methods：

data() {
  return {
    queue: [],
    currentToast: null,
    show: false
  };
},
methods: {
  display(message, duration = 2000) {
    this.queue.push({ message, duration });
    if (!this.currentToast) {
      this.showNext();
    }
  },
  showNext() {
    if (this.queue.length === 0) {
      this.currentToast = null;
      return;
    }
    this.currentToast = this.queue.shift();
    this.message = this.currentToast.message;
    this.show = true;
    setTimeout(() => {
      this.show = false;
      setTimeout(() => this.showNext(), 300);
    }, this.currentToast.duration);
  }
}