49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
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>
|