Vue Message Notification Plugin

一个适用于Vue2和Vue3的消息通知插件，基于Element Plus/Element UI组件库。

特性

• 🚀 同时支持Vue2和Vue3
• 💡 基于Element Plus（Vue3）/Element UI（Vue2）组件库
• 📱 响应式设计
• 🎨 可自定义样式
• 📦 轻量级，易于集成

安装

npm install @renxiangdong/message-notification

使用方法

1. 全局注册插件

// Vue3
import { createApp } from 'vue'
import MessageNotification from '@renxiangdong/message-notification'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(MessageNotification)

// Vue2
import Vue from 'vue'
import MessageNotification from '@renxiangdong/message-notification'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.use(MessageNotification)

2. 在组件中使用

<template>
  <div>
    <MessageNotification 
      :messages="messages"
      :iconSize="24"
      :popoverWidth="350"
      @message-read="handleMessageRead"
      @all-read="handleAllRead"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        {
          id: 1,
          content: '您有一条新消息',
          time: new Date(),
          read: false
        },
        {
          id: 2,
          content: '系统维护通知',
          time: new Date(Date.now() - 3600000), // 1小时前
          read: true
        }
      ]
    }
  },
  methods: {
    handleMessageRead(messageId) {
      // 处理消息已读逻辑
      const message = this.messages.find(msg => msg.id === messageId)
      if (message) {
        message.read = true
      }
    },
    handleAllRead() {
      // 处理全部已读逻辑
      this.messages.forEach(msg => {
        msg.read = true
      })
    }
  }
}
</script>

API

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | messages | 消息列表 | Array | [] | | iconSize | 图标大小 | Number | 20 | | popoverWidth | 弹窗宽度 | Number | 300 |

Events

| 事件名 | 说明 | 参数 | |--------|------|------| | message-read | 消息被标记为已读时触发 | messageId | | all-read | 所有消息被标记为已读时触发 | - |

消息对象结构

{
  id: Number|String,    // 消息ID
  content: String,      // 消息内容
  time: Date,          // 消息时间
  read: Boolean        // 是否已读
}

开发

# 安装依赖
npm install

# 构建
npm run build

# 开发模式
npm run dev

License

MIT