WebIndex/components/alert/Notification.vue

<script lang="ts" setup>
const {$mitt} = useNuxtApp()
const notifications = ref<INotification[]>([]);
const 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',
};

const 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 space-y-4 z-50">
    <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="font-bold text-lg">{{ notification.title }}</h3>
      <p>{{ notification.message }}</p>
    </div>
  </div>
</template>

<style scoped>

</style>