48 lines
1.1 KiB
Vue
48 lines
1.1 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
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)
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
emitter.on('eventBus', addNotification)
|
||
|
|
|
||
|
|
onBeforeUnmount(() => {
|
||
|
|
emitter.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>
|