vue3进行全页面通知

在缓存中加入通知

在 stores/notification.ts 文件内加入

import { defineStore } from 'pinia'
import { ref } from 'vue'

interface Notification {
  id: string
  type: 'success' | 'error' | 'warning' | 'info'
  message: string
  duration?: number
  show: boolean
}

export const useNotificationStore = defineStore('notification', () => {
  const notifications = ref<Notification[]>([])

  const addNotification = (options: Omit<Notification, 'id' | 'show'>) => {
    const newNotification: Notification = {
      id: 'notification',
      ...options,
      show: true,
      duration: options.duration || 3000
    }
    notifications.value.push(newNotification)
    setTimeout(() => hideNotification(newNotification.id), newNotification.duration)
  }

  const hideNotification = (id: string) => {
    const index = notifications.value.findIndex((n) => n.id === id)
    if (index > -1) {
      notifications.value[index].show = false
      setTimeout(() => {
        notifications.value = notifications.value.filter((n) => n.id !== id)
      }, 3000) // 动画时间
    }
  }

  return { notifications, addNotification, hideNotification }
})

在组件内写入通知样式

在通用组件下新建文件 Notification

<script setup lang="ts">
import { useNotificationStore } from '@/store/notification'
import { onMounted, onUnmounted } from 'vue'

defineOptions({ name: 'Notification' })

const notificationStore = useNotificationStore()

const closeNotification = (id: string) => {
  notificationStore.hideNotification(id)
}

onMounted(() => {
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      notificationStore.notifications.value.forEach((notification) => {
        notification.show = false
      })
    }
  })
})

onUnmounted(() => {
  document.removeEventListener('keydown', () => {})
})
</script>

<template>
  <div class="notification-container">
    <transition-group name="slide-fade" tag="div">
      <div
        v-for="notification in notificationStore.notifications"
        :key="notification.id"
        v-show="notification.show"
        :class="['notification', notification.type]"
        @click="closeNotification(notification.id)"
      >
        {{ notification.message }}
        <button @click.stop="closeNotification(notification.id)" class="close-btn">×</button>
      </div>
    </transition-group>
  </div>
</template>

<style scoped>
.notification-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center; 
}

.notification {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 300px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.success {
  background: rgba(103, 194, 58, 0.9);
}
.error {
  background: rgba(245, 108, 108, 0.9);
}
.warning {
  background: rgba(230, 162, 60, 0.88);
}
.info {
  background: rgba(64, 158, 255, 0.82);
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.3s ease;
}

.slide-fade-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.slide-fade-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

.close-btn {
  border: none !important; 
  outline: none !important;
  background: transparent;
  color: white !important;
  cursor: pointer;
  font-size: 1.2em; 
  padding: 2px 0.5rem; 
  line-height: 1;
}
</style>

全局注册

// 引入通知模块
import Notification from '@/components/Notification/Notification.vue'

// 挂载全局
app.component('Notification', Notification)

页面使用

1. 引入 useNotificationStore

	import { useNotificationStore } from '@/store/notification'

2. 使用

	const notificationStore = useNotificationStore()

    notificationStore.addNotification({
      type: 'success',
      message: '操作成功！',
      duration: 2000
    })
    
    notificationStore.addNotification({
      type: 'error',
      message: '操作失败！',
      duration: 2000
    })