当前位置：首页 > VUE

vue实现toast

2026-01-07 20:55:02VUE

Vue 实现 Toast 的方法

使用第三方库（推荐）

对于快速实现 Toast 功能，推荐使用成熟的第三方库如 vue-toastification 或 vant 的 Toast 组件。

安装 vue-toastification：

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，可以创建一个独立的组件。

创建 Toast.vue 组件：

vue实现toast

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

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

<style>
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -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 app = createApp(App)
app.component('Toast', Toast)

// 在组件中使用
this.$refs.toast.showToast('自定义提示')

使用 Vue 插件形式

将 Toast 封装为 Vue 插件，便于全局调用。

创建 toast-plugin.js：

const ToastPlugin = {
  install(app) {
    app.config.globalProperties.$toast = {
      show(msg, duration = 2000) {
        const toast = document.createElement('div')
        toast.className = 'toast-message'
        toast.textContent = msg
        document.body.appendChild(toast)

        setTimeout(() => {
          document.body.removeChild(toast)
        }, duration)
      }
    }
  }
}

export default ToastPlugin

注册插件：

vue实现toast

import ToastPlugin from './toast-plugin'

const app = createApp(App)
app.use(ToastPlugin)

使用方式：

this.$toast.show('插件式提示')

使用 Composition API

对于 Vue 3 项目，可以使用 Composition API 实现响应式 Toast。

创建 useToast.js：

import { ref } from 'vue'

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

  function showToast(msg, duration = 2000) {
    toast.value.show = true
    toast.value.message = msg

    setTimeout(() => {
      toast.value.show = false
    }, duration)
  }

  return { toast, showToast }
}

在组件中使用：

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

<script setup>
import { useToast } from './useToast'

const { toast, showToast } = useToast()

// 调用示例
showToast('Composition API Toast')
</script>

每种方法各有优缺点，第三方库功能最完善但灵活性较低，自定义组件和插件方式更灵活但需要自行处理更多细节。根据项目需求选择最适合的方案。