vue 实现toast组件

实现 Vue Toast 组件的方法

使用 Vue 插件形式封装 Toast

创建一个独立的 Toast 组件文件（如 Toast.vue），包含模板、样式和基本逻辑：

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

<script>
export default {
  data() {
    return {
      show: false,
      message: '',
      type: 'info' // 支持 info/success/error/warning 等类型
    }
  },
  methods: {
    hide() {
      this.show = false
    }
  }
}
</script>

<style scoped>
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 4px;
  color: white;
  z-index: 9999;
}

.toast.info {
  background-color: #3498db;
}

.toast.success {
  background-color: #2ecc71;
}

.toast.error {
  background-color: #e74c3c;
}

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

创建插件安装文件

新建 toast.js 文件实现插件安装逻辑：

import Vue from 'vue'
import ToastComponent from './Toast.vue'

const ToastConstructor = Vue.extend(ToastComponent)

const Toast = (options = {}) => {
  const instance = new ToastConstructor({
    data: options
  }).$mount()

  document.body.appendChild(instance.$el)
  instance.show = true

  if (options.duration) {
    setTimeout(() => {
      instance.hide()
    }, options.duration)
  }

  return instance
}

export default {
  install(Vue) {
    Vue.prototype.$toast = Toast
  }
}

全局注册使用

在 main.js 中注册插件：

import Vue from 'vue'
import Toast from './plugins/toast'

Vue.use(Toast)

组件内调用方式

// 基础用法
this.$toast({ message: '操作成功' })

// 带类型和自动关闭
this.$toast({
  message: '保存成功',
  type: 'success',
  duration: 3000
})

// 错误提示
this.$toast({
  message: '操作失败',
  type: 'error'
})

可选增强功能

添加位置控制选项，支持 top/middle/bottom 显示：

// 修改 Toast.vue 样式
.toast.top {
  top: 20px;
}

.toast.middle {
  top: 50%;
  transform: translate(-50%, -50%);
}

.toast.bottom {
  top: auto;
  bottom: 20px;
}

添加队列管理防止多个 Toast 重叠：

// 在 toast.js 中添加队列逻辑
let toastQueue = []
let activeToast = null

const showNextToast = () => {
  if (toastQueue.length > 0 && !activeToast) {
    activeToast = toastQueue.shift()
    activeToast.show = true

    activeToast.$once('hidden', () => {
      activeToast = null
      showNextToast()
    })
  }
}

const Toast = (options = {}) => {
  const instance = new ToastConstructor({
    data: options
  }).$mount()

  document.body.appendChild(instance.$el)
  toastQueue.push(instance)
  showNextToast()

  // ...其余逻辑
}

这种实现方式提供了灵活的 Toast 通知功能，支持多种消息类型、自动关闭和位置控制，可以通过插件形式全局调用。