多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

38 lines
1021 B

<script lang="ts" setup>
const notificationStore = useNotification()
const { loadNotifications, markAsOpened } = notificationStore
onMounted(async () => {
await loadNotifications()
})
const onOpen = (visible: boolean) => {
if (visible) {
markAsOpened()
}
}
</script>
<template>
<div class="cursor-pointer flex items-center">
<a-dropdown :trigger="['click']" @visible-change="onOpen">
<div class="relative leading-none">
<GeneralIcon icon="notification" />
<GeneralIcon icon="menuDown" />
<span v-if="!notificationStore.isOpened && notificationStore.unreadCount" class="nc-count-badge">{{
notificationStore.unreadCount
}}</span>
</div>
<template #overlay>
<NotificationCard />
</template>
</a-dropdown>
</div>
</template>
<style scoped>
.nc-count-badge {
@apply absolute flex items-center top-[-6px] right-[-6px] px-1 min-w-[14px] h-[14px] rounded-full bg-accent bg-opacity-100 text-white !text-[9px] !z-21;
}
</style>