当前位置：首页 > VUE

vue toast实现

2026-01-08 00:12:45VUE

Vue Toast 实现方法

使用第三方库（推荐）

安装 vue-toastification 库，这是一个功能丰富且轻量级的 Vue Toast 插件。

npm install vue-toastification

在 Vue 项目中注册插件：

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

const app = createApp(App);
app.use(Toast);

在组件中使用：

this.$toast.success("操作成功");
this.$toast.error("操作失败");
this.$toast.info("提示信息");

自定义 Toast 组件

创建一个可复用的 Toast 组件，通过 Vue 的响应式数据控制显示状态。

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

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

<style>
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  z-index: 1000;
}
</style>

使用全局事件总线

通过事件总线实现跨组件触发 Toast。

// main.js
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.config.globalProperties.$eventBus = new Vue();

// 在任何组件中触发
this.$eventBus.$emit("show-toast", { message: "Hello", type: "success" });

// 在 Toast 组件中监听
mounted() {
  this.$eventBus.$on("show-toast", (payload) => {
    this.displayToast(payload.message);
  });
}

使用 Provide/Inject

在根组件提供 Toast 方法，子组件通过注入调用。

// App.vue
export default {
  provide() {
    return {
      showToast: this.showToast,
    };
  },
  methods: {
    showToast(message) {
      // 控制 Toast 显示逻辑
    },
  },
};

// 子组件
export default {
  inject: ["showToast"],
  methods: {
    triggerToast() {
      this.showToast("Injected toast");
    },
  },
};

动画效果增强

为 Toast 添加淡入淡出动画，提升用户体验。

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

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

vue toast实现