当前位置：首页 > VUE

vue 实现toast

2026-03-06 22:39:33VUE

Vue 实现 Toast 的方法

使用第三方库（推荐）

对于快速实现 Toast，推荐使用成熟的第三方库如 vue-toastification 或 vant，它们提供了丰富的配置和动画效果。

安装 vue-toastification：

npm install vue-toastification@next

在 Vue 项目中注册插件：

import { createApp } from 'vue';
import Toast from 'vue-toastification';
import 'vue-toastification/dist/index.css';

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

使用 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: {
    showToast(message, duration = 2000) {
      this.message = message;
      this.show = true;
      setTimeout(() => {
        this.show = false;
      }, duration);
    }
  }
};
</script>

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

注册全局方法：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import Toast from './components/Toast.vue';

const app = createApp(App);
const toast = app.component('Toast', Toast);
app.config.globalProperties.$toast = toast.methods.showToast;

在组件中使用：

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

使用 Vue 3 Composition API

对于 Vue 3 项目，可以通过 Composition API 实现更灵活的 Toast。

创建 useToast.js 组合式函数：

import { ref } from 'vue';

export default function useToast() {
  const toast = ref({
    show: false,
    message: ''
  });

  const showToast = (message, duration = 2000) => {
    toast.value.message = message;
    toast.value.show = true;
    setTimeout(() => {
      toast.value.show = false;
    }, duration);
  };

  return { toast, showToast };
}

在组件中使用：

vue 实现toast

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

<script>
import useToast from '@/composables/useToast';

export default {
  setup() {
    const { toast, showToast } = useToast();

    // 调用示例
    showToast('Composition API Toast');

    return { toast };
  }
};
</script>