WebIndex/components/alert/Notification.vue

<script lang="ts" setup>
const { $mitt } = useNuxtApp(),
  notifications = ref<INotification[]>([]),
  typeClasses = {
    success: 'bg-green-100 text-green-800 border border-green-400',
    error: 'bg-red-100 text-red-800 border border-red-400',
    warning: 'bg-yellow-100 text-yellow-800 border border-yellow-400',
    info: 'bg-blue-100 text-blue-800 border border-blue-400',
  },

  addNotification = (notification: INotification) => {
    notifications.value.push(notification)

    // 自动移除通知
    setTimeout(() => {
      notifications.value.shift()
    }, 5000)
    console.log(1)
  }

$mitt.on('eventBus', addNotification)

onBeforeUnmount(() => {
  $mitt.off('eventBus', addNotification)
})
</script>

<template>
  <div class="fixed top-5 right-5 z-50 space-y-4">
    <div
      v-for="(notification, index) in notifications"
      :key="index"
      :class="[
        'p-4 rounded-lg shadow-lg transition-all duration-300',
        typeClasses[notification.level],
      ]"
    >
      <h3 class="text-lg font-bold">
        {{ notification.title }}
      </h3>
      <p>{{ notification.message }}</p>
    </div>
  </div>
</template>

<style scoped>

</style>