Vue+Notification 自界说消息关照组件 支持数据分页 及时更新

结果图：

2. <img alt=""  src="[img]https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMDI0OGY4ZGIwN2Y4NGNmZTg5YTA0NmNmNGFlZjFlNDUucG5n[/img]"  />

复制代码

 message.vue 消息组件 子组件

2. <template>
3.   <div class="custom-notification">
4.     <div class="content">
5.       <span @click="gotoMessageList(currentMessage.split('=')[1])">{{ currentMessage.split('=')[0] }}</span>
6.     </div>
7.     <div class="footer">
8.       <div class="left-buttons">
9.         <el-button size="mini" type="text"  @click="handleIgnoreAll">忽略全部</el-button>
10.       </div>
11.       <div class="pagination">
12.         <el-pagination
13.           small
14.           :key="paginationKey"
15.           :current-page.sync="currentPage"
16.           :page-size="1"
17.           :total="localNoticeList.length"
18.           layout="prev,slot, next"
19.           prev-text="<"
20.           next-text=">"
21.           @prev-click="currentPage--"
22.           @next-click="currentPage++">
23.           <span class="pagination-text">{{ currentPage }} / {{ totalPages }}</span>
24.         </el-pagination>
25.       </div>
26.       <div class="right-button">
27.         <el-button type="primary" size="mini" @click="handleAccept(currentMessage.split('=')[1])">接受</el-button>
28.       </div>
29.     </div>
30.   </div>
31. </template>
33. <script>
34.   export default {
35.     props: {
36.       messages: {
37.         type: Array,
38.         default: () => []
39.       },
40.       total:{
41.         type:Number,
42.         default:0
43.       },
44.       noticeList:{
45.         type:Array,
46.         default:()=>[]
47.       }
48.     },
49.     data() {
50.       return {
51.         localNoticeList: [], // 新增本地副本
52.         currentPage: 1,
53.         totalPage: 5,
54.         paginationKey: 0  // 分页组件独立key
55.       }
56.     },
57.     watch: {
58.       noticeList: {
59.         deep:true,
60.         immediate: true,
61.         handler(newVal) {
62.           this.localNoticeList = JSON.parse(JSON.stringify(newVal))
63.           // 当消息更新时自动重置页码
64.           this.currentPage = Math.min(this.currentPage, newVal.length)
65.           this.paginationKey++  // 强制分页组件重置
66.           // this.updateList(this.localNoticeList)
67.         }
68.       }
69.     },
70.     computed: {
71.       totalPages() {
72.         return this.localNoticeList.length || 1
73.       },
74.       currentMessage() {
75.         return this.localNoticeList[this.currentPage - 1]?.messageTitle +'='+this.localNoticeList[this.currentPage - 1]?.messageId || ''
76.       }
77.     },
78.     methods: {
79.       handleLater() {
80.         // 稍后提醒逻辑
81.         this.$emit('later')
82.       },
83.       handleIgnoreAll() {
84.         // 忽略全部 将消息全部设为已读
85.         this.$emit('ignore-all',this.localNoticeList) // 触发父级关闭事件
86.       },
87.       handleAccept(msgId) {
88.         //接收
89.         this.$emit('gotoMessageList',msgId)
90.       },
91.       gotoMessageList(msgId){
92.         this.$emit('gotoMessageList',msgId)
93.       },
94.       // 通过事件通知父组件
95.       updateList(newList) {
96.         this.$emit('update-list', newList)
97.       }
98.     }
99.   }
100. </script>
102. <style scoped>
103.   .custom-notification {
104.     padding: 15px 0px 15px 0px;
105.     width: 270px;
106.   }
108.   .header {
109.     display: flex;
110.     align-items: center;
111.     margin-bottom: 12px;
112.   }
113.   .content{
114.     cursor: pointer;
115.     font-weight: bold;
116.     font-size: 13px;
117.   }
118.   .header i {
119.     margin-right: 8px;
120.     font-size: 16px;
121.   }
123.   .footer {
124.     display: flex;
125.     justify-content: space-between;
126.     align-items: center;
127.     margin-top: 15px;
128.   }
130.   .pagination {
131.     display: flex;
132.     align-items: center;
133.     gap: 8px;
134.   }
136.   .pagination i {
137.     cursor: pointer;
138.     color: #606266;
139.   }
141.   .left-buttons .el-button--text {
142.     color: #909399;
143.   }
144.   .pagination-text{
145.     text-align: center;
146.   }
147. </style>

复制代码

消息父组件：

2. <template>
3.   <div>
4.     <el-badge :value="total" class="item" style="line-height: 40px; position: relative;">
5.       <span @click="bellClick">
6.         <el-icon
7.           class="el-icon-bell"
8.           style="font-size: 20px; cursor: pointer; transform: translateY(1.1px)"
9.         ></el-icon>
10.       </span>
11.     </el-badge>
12.     <!-- 添加或修改我的消息对话框 -->
13.     <el-dialog title="我的消息" :visible.sync="open" width="500px" append-to-body>
14.       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
15.         <el-form-item label="消息标题" prop="messageTitle">
16.           <el-input disabled v-model="form.messageTitle" placeholder="请输入消息标题" />
17.         </el-form-item>
19.         <el-form-item label="消息内容">
20.           <editor :readOnly="true" v-model="form.messageContent" :min-height="192" />
21.         </el-form-item>
22.       </el-form>
23.       <div slot="footer" class="dialog-footer">
24.         <el-button @click="cancel">关闭</el-button>
25.       </div>
26.     </el-dialog>
27.     <!--  word预览弹窗  -->
28.     <el-dialog fullscreen title="word预览" :visible.sync="dialogVisibleWord" append-to-body>
29.       <vue-office-docx :src="previewWordOffice" @rendered="renderedHandler" @error="errorHandler" />
30.     </el-dialog>
31.     <!--    doc预览  -->
32.     <el-dialog fullscreen title="word预览" :visible.sync="DocSync" append-to-body>
33.       <VueOfficePdf :src="docSrc"  />
34.     </el-dialog>
35.     <el-dialog
36.       :title="msg.messageTitle"
37.       :visible.sync="messageVisible"
38.       width="800px"
39.       append-to-body
40.       class="my-message__dialog"
41.       @close="closeMsgModel"
42.     >
43.       <div><span class="contentImg" v-html="msg.messageContent"></span>
44.       </div>
45.       <div class="my-message__filebox" v-if="fileList.length > 0">
46.         <div>附件：</div>
47.         <ul class="my-message__ul">
48.           <li class="my-message__li" v-for="(item, index) in fileList" :key="index">
49.             <div class="my-message__li--title">{{ item.name }}</div>
50.             <div class="my-message__li--opt">
51.               <el-button
52.                 style="color: green"
53.                 @click.stop="handleShow(index, item)"
54.                 type="text"
55.                 icon="el-icon-view"
56.                 size="mini"
57.                 v-if="getFileExtension(item.name) !== 'zip' && getFileExtension(item.name) !== 'rar'"
58.               >查看
59.               </el-button>
60.             </div>
61.           </li>
62.         </ul>
63.       </div>
64.       <div slot="footer" class="dialog-footer">
65.         <el-button @click.stop="closeMsgModel">关闭</el-button>
66.       </div>
67.     </el-dialog>
68. <!--    <custom-notification></custom-notification>-->
69.   </div>
70. </template>
72. <script>
73. import Vue from 'vue'
74. import { mapGetters } from 'vuex';
76. //引入VueOfficeDocx组件
77. import VueOfficeDocx from '@vue-office/docx';
78. import { listMyUnreadNotice, getSysmessage, listSysmessage } from '@/api/system/sysmessage';
79. import { fileDownload, previewDocumentAPI } from '@/api/files/files';
80. import XLSX from 'xlsx';
81. import events from '@/utils/events';
82. import VueOfficePdf from '@vue-office/pdf';
83. import Notification from 'element-ui/lib/notification'
84. import CustomNotification from '@/components/Bell/component/message'
85. export default {
86.   name: 'index',
87.   components: { VueOfficePdf, VueOfficeDocx,CustomNotification },
88.   data() {
89.     return {
90.       DocSync:false,
91.       docSrc:'',
92.       baseUrl: 'http://' + window.location.host + process.env.VUE_APP_BASE_API,
93.       dialogVisibleWord: false,
94.       previewWordOffice: '',
95.       noticeList: [],
96.       noticeListNew:[],//
97.       pollInterval: null,// 轮询定时器
98.       lastCheckTime: null,// 最后检查时间
99.       notificationKey:0,
100.       isFirstCheck: true,// 首次检查标志
101.       templateVisible: false,
102.       messageVisible:false,
103.       showAllBtn: false,
104.       msg:{},
105.       form: {},
106.       rules: {},
107.       open: false,
108.       queryParams: {
109.         id: null,
110.         status: '0'
111.       },
112.       fileList: [],
113.       total: 0,
114.       totalNew:0,
115.       notificationInstance:null //通知示例
116.     };
117.   },
118.   computed: {
119.     ...mapGetters(['isDot', 'id'])
120.   },
122.   created() {
123.     // on接收   emit发送
124.     this.clearPolling()
125.     this.getUnRead(); //查询是否有未读消息通知
126.     this.getUnReadNew(); //初始化调用获取未读消息
127.     events.$on('noticePush', this.getUnRead);
128.     events.$on('noticePushByMsg', this.getUnRead);
129.     this.$nextTick(() => {
130.       events.$on('noticeCheckByMsg', this.getUnRead);
131.       // events.$on('noticeCancel',this.cancel);
132.     });
133.     events.$on('noticePush',this.getUnReadNew)
135.   },
136.   mounted() {
137.   },
138.   beforeDestroy() {
139.     // this.clearPolling()
140.   },
141.   // 关闭定时器
142.   deactivated(){
143.     // this.clearPolling()
144.   },
145.   methods: {
146.     // 跳转链接
147.     clickSpan() {
148.       // 点击跳转我的消息页
149.       this.$router.push('/task/myMessage');
150.     },
151.     /**word预览组件回调函数 */
152.     renderedHandler() {
153.       console.log('渲染完成');
154.     },
155.     errorHandler() {
156.       console.log('渲染失败');
157.     },
158.     /** 查询是否存在未读消息 根据当前用户匹配消息表中得ID  */
159.     getUnRead() {
160.       this.queryParams.id = this.id;
161.       // 查询未读消息
162.       listSysmessage(this.queryParams).then((res) => {
163.         if (res.code == 200) {
164.           if (res.rows.length > 0) {
165.             // 这里的total  要请求我的代办的接口 然后加起来
166.             this.total = res.total;
167.             this.noticeList = res.rows;
168.             this.$store.dispatch('app/setIsDot', true);
169.           } else {
170.             this.total = null;
171.             this.noticeList = [];
172.             this.$store.dispatch('app/setIsDot', false);
173.           }
174.           this.$emit('getUnRead', this.noticeList);
175.         }
176.       });
177.     },
178.     //查询未读消息重构 添加定时任务 每隔20分钟调用一次
179.     /** 核心查询方法 */
180.     async getUnReadNew() {
181.       try {
182.         const params = {
183.           id: this.id, // 用户ID
184.           status:0,
185.         }
186.         const { code, rows, total } = await listSysmessage(params)
187.         if (code === 200) {
188.           this.handleNewMessages(rows, total)
189.           this.lastCheckTime = new Date()
190.         }
191.       } catch (error) {
192.         console.error('消息检查失败:', error)
193.       }
194.     },
195.     /** 处理新消息逻辑 */
196.     handleNewMessages(rows, total) {
197.       // 数据同步
198.       this.noticeListNew = rows
199.       this.totalNew = rows.length//total
200.       // 仅当有新消息时触发通知
201.       if (rows.length > 0) {
202.         if (this.notificationInstance) {
203.           // 手动创建组件实例
204.           // 通过 key 变化强制更新组件
205.           this.notificationKey = Date.now()
206.           // const NotificationComponent = new Vue({
207.           //   render: h => h(CustomNotification, {
208.           //     props: {
209.           //       noticeList: [...this.noticeListNew],
210.           //       total: this.noticeListNew.length
211.           //     },
212.           //     on: {
213.           //       // 事件监听...
214.           //     }
215.           //   })
216.           // }).$mount()
217.           // // 保存组件实例引用
218.           // this.customNotificationInstance = NotificationComponent.$children[0]
219.           // this.customNotificationInstance = this.notificationInstance.$children[0]
220.           //已有弹窗时仅更新数据
221.           this.customNotificationInstance.$set(
222.             this.customNotificationInstance,
223.             'noticeList',
224.             [...rows]
225.           )
226.           this.customNotificationInstance.$forceUpdate()
227.          } else {
228.           this.showNotification()
229.          }
230.       }
231.       this.$emit('update:noticeList', rows)
232.       window.clearInterval(this.pollInterval)
233.       this.setupPolling()// 启动轮询 后台发送消息时 自动触发
234.     },
235.     /** 判断是否有新消息 */
236.     hasNewMessages(newRows) {
237.       return newRows.some(item =>
238.         !this.noticeListNew.find(old => old.messageId === item.messageId)
239.       )
240.     },
241.     /** 轮询控制 */
242.     setupPolling() {
243.       // 5分钟调用一次 60000 * 5 300000
244.       this.clearPolling() // 清除已有定时器
245.       this.pollInterval = window.setInterval(() => {
246.         this.getUnReadNew()
247.       },300000)
248.     },
249.     /** 销毁定时器*/
250.     clearPolling() {
251.       if (this.pollInterval) {
252.         window.clearInterval(this.pollInterval)
253.         this.pollInterval = null
254.       }
255.     },
256.     bellClick() {
257.       this.getUnRead();
259.     },
260.     cancel() {
261.       this.open = false;
262.       this.getUnRead();
263.     },
265.     cancelTempDialog() {
266.       this.templateVisible = false;
267.       this.getUnRead();
268.     },
269.     // 查看更多
270.     showAll() {
271.       this.$router.push({ path: '/monitor/myMessage' });
272.     },
273.     //查看消息 弹窗显示
274.     handleRead(data) {
275.       const messageId = data.messageId;
276.       getSysmessage(messageId).then((response) => {
277.         this.form = response.data;
278.         // this.form.messageTitle = data.messageTitle
279.         // this.form.messageContent = data.messageContent
280.         if (this.form.fileJSON && JSON.parse(this.form.fileJSON)) {
281.           this.fileList = JSON.parse(this.form.fileJSON);
282.         } else {
283.           this.fileList = [];
284.         }
285.         if (this.form.messageType === '3') {
286.           this.templateVisible = true;
287.         } else {
288.           this.open = true;
289.           this.title = '查看我的消息';
290.         }
291.       });
292.     },
293.     toLink(url) {
294.       if (url) {
295.         if (url.indexOf('http://') > -1 || url.indexOf('https://') > -1) {
296.           window.open(url);
297.         } else {
298.           this.$router.push({ path: url });
299.         }
300.       }
301.       this.cancelTempDialog();
302.     },
303.     handleDownLoad(index, file) {
304.       const param = {
305.         code: file.code,
306.         fileName: file.name
307.       };
308.       fileDownload(param)
309.         .then((response) => {
310.           if (response) {
311.             const url = window.URL.createObjectURL(new Blob([response]));
312.             const link = document.createElement('a');
313.             link.href = url;
314.             link.setAttribute('download', file.name); // 设置下载的文件名
315.             document.body.appendChild(link);
316.             link.click();
317.             document.body.removeChild(link);
318.           }
319.         })
320.         .catch((error) => {
321.         });
322.     },
323.     //  预览
324.     async handleShow(index, file) {
325.       const param = {
326.         code: file.code,
327.         fileName: file.name
328.       };
329.       const type = file.name.split('.')[file.name.split('.').length - 1];
331.       await fileDownload(param)
332.         .then(async (response) => {
333.           if (type === 'pdf' || type === 'PDF') {
334.             //pdf预览
335.             let blob = new Blob([response], {
336.               type: 'application/pdf'
337.             });
338.             let fileURL = window.URL.createObjectURL(blob);
339.             window.open(fileURL, '_blank'); //这里是直接打开新窗口
340.           } else if (type === 'txt' || type === 'TXT') {
341.             //txt预览
342.             // 将文件流转换为文本
343.             const text = await response.text();
345.             // 在新窗口中打开文本内容
346.             const newWindow = window.open();
347.             newWindow.document.write(`<pre>${text}</pre>`);
348.           } else if (type === 'xls' || type === 'xlsx') {
349.             //excel预览
350.             // 将文件流转换为ArrayBuffer
351.             const arrayBuffer = await response.arrayBuffer();
353.             // 使用xlsx插件解析ArrayBuffer为Workbook对象
354.             const workbook = XLSX.read(arrayBuffer, { type: 'array' });
356.             // 获取第一个Sheet
357.             const sheetName = workbook.SheetNames[0];
358.             const sheet = workbook.Sheets[sheetName];
360.             // 将Sheet转换为HTML表格
361.             const html = XLSX.utils.sheet_to_html(sheet);
363.             // 添加表格线样式
364.             const styledHtml = `
365.             <style>
366.             table {
367.               border-collapse: collapse;
368.             }
370.             td, th {
371.               border: 1px solid black;
372.               padding: 8px;
373.             }
374.             </style>
375.             ${html}
376.             `;
377.             // 在新窗口中打开HTML内容
378.             const newWindow = window.open();
379.             setTimeout(() => {
380.               newWindow.document.title = sheetName;
381.             }, 0);
382.             newWindow.document.write(styledHtml);
383.           } else if (type === 'doc' || type === 'docx') {
384.             if (type === 'doc') {
385.               // doc预览 需要转码 定时任务
386.               this.handleMany(file.code,type)
387.             }else{
388.               // docx预览
389.               const fileUrl = window.URL.createObjectURL(response);
390.               this.previewWordOffice = fileUrl;
391.               this.dialogVisibleWord = true;
392.             }
393.           }
394.           else if (type === 'png' || type === 'jpg') {
395.             const fileURL = window.URL.createObjectURL(response);
396.             this.qrCode = fileURL;
397.             this.dialogVisible = true;
398.             console.log(fileURL, 'fileURL的值为-----------');
399.             this.saveFile = file;
401.           }
402.         })
403.         .catch((error) => {});
404.     },
405.     //  doc 预览
406.     handleMany(code,type) {
407.       previewDocumentAPI({code: code}).then(response => {
408.         let fileURL
409.         fileURL = this.baseUrl + response.msg
410.         if (type === 'doc' || type === 'docx') {
411.           this.docSrc = fileURL
412.           this.DocSync = true
413.         }
414.       })
415.     },
416.     showNotification() {
417.       // 如果已有通知实例且未关闭，先关闭
418.       if (this.notificationInstance) {
419.         this.$notify.closeAll()
420.       }
421.       const h = this.$createElement
422.       const notificationNode = h(CustomNotification, {
423.         key: this.notificationKey, // 添加唯一key
424.         props: {
425.           noticeList: [...this.noticeListNew], // 传递消息列表
426.           total:this.noticeListNew.length
427.         },
428.         on: {
429.           // 添加事件监听
430.           'update-list': this.handleListUpdate,
431.           'close-notification': () => this.$notify.closeAll(),
432.           'later': () => {
433.             this.$notify.closeAll()
434.           },
435.           'ignore-all': (localNoticeList) => {
436.             const msgList = localNoticeList
437.             msgList & msgList.forEach((item)=>{
438.               this.readMessageAll(item.messageId)
439.             })
440.             this.$notify.closeAll()
441.             this.getUnRead()
442.           },
443.           'accept': () => {
444.             console.log('接受处理逻辑')
445.           },
446.           close: () => {
447.             this.notificationInstance = null
448.           },
449.           'gotoMessageList': (msgId) => {
450.             this.readMessage(msgId)
451.             this.getUnRead()
452.             //阅读了那一条 根据ID匹配然后进行过滤
453.             this.noticeListNew = this.noticeListNew.filter(item=> item.messageId !== Number(msgId))
454.             if(this.noticeListNew.length > 0){
455.               this.customNotificationInstance.$set(
456.                 this.customNotificationInstance,
457.                 'noticeList',
458.                 [...this.noticeListNew]
459.               )
460.               this.customNotificationInstance.$forceUpdate()
461.             }else{
462.               this.$notify.closeAll()
463.             }
465.           }
466.         }
467.       })
469.       this.notificationInstance = this.$notify.info({
470.         title: '消息通知',
471.         message: notificationNode,
472.         customClass:'bellClass',
473.         position: 'bottom-right',
474.         duration:60000,
475.         onClose: () => {
476.           this.notificationInstance = null
477.         }
478.       });
479.       // 获取组件实例
480.       this.customNotificationInstance = notificationNode.componentInstance
481.     },
482.     // 处理列表更新事件
483.     handleListUpdate(newList) {
484.       this.noticeListNew = newList
485.     },
486.     //查看消息 弹窗显示
487.     readMessage(msgId) {
488.       const messageId = msgId;
489.       getSysmessage(messageId).then((response) => {
490.         this.messageVisible = true
491.         this.msg = response.data;
492.         // this.form.messageTitle = data.messageTitle
493.         // this.form.messageContent = data.messageContent
494.         if (this.msg.fileJSON && JSON.parse(this.msg.fileJSON)) {
495.           this.fileList = JSON.parse(this.msg.fileJSON);
496.         } else {
497.           this.fileList = [];
498.         }
499.       });
500.     },
501.     //批量已读
502.     readMessageAll(msgId) {
503.       const messageId = msgId;
504.       getSysmessage(messageId).then((response) => {
505.       });
506.     },
507.     getFileExtension(filename) {
508.       // 获取最后一个点的位置
509.       const lastDotIndex = filename.lastIndexOf('.')
510.       // 如果没有点或者点在第一个位置，返回空字符串
511.       if (lastDotIndex === -1 || lastDotIndex === 0) {
512.         return ''
513.       }
514.       // 截取点后的字符串作为后缀
515.       return filename.substring(lastDotIndex + 1)
516.     },
517.     closeMsgModel(){
518.       this.messageVisible = false
519.     }
520.   }
521. };
522. </script>
524. <style rel="stylesheet/scss" lang="scss" scoped>
525. .my-message {
526.   ::v-deep .el-checkbox__label {
527.     vertical-align: middle;
528.   }
530.   &__editor {
531.     ::v-deep .ql-toolbar {
532.       display: none;
533.     }
535.     ::v-deep .ql-container {
536.       // border-top: 1px solid #ccc !important;
537.       border: none !important;
538.     }
540.     ::v-deep .ql-editor {
541.       max-height: 500px;
542.     }
543.   }
545.   &__ul {
546.     list-style-type: none;
547.     // border: 1px solid #ccc;
548.     // border-radius: 5px;
549.   }
551.   &__filebox {
552.     margin-top: 10px;
553.     padding-left: 20px;
554.     padding-right: 20px;
555.     background: #e6f7ff;
556.     border-radius: 5px;
557.   }
559.   &__dialog {
560.     ::v-deep .el-dialog__body {
561.       padding-bottom: 0px !important;
562.     }
563.   }
565.   &__li {
566.     width: 100%;
567.     display: flex;
568.     justify-content: space-between;
570.     margin-bottom: 5px;
572.     &--opt {
573.       padding-right: 10px;
574.     }
575.   }
576. }
578. ::v-deep .el-badge__content.is-fixed {
579.   transform: translateY(-22%) translateX(100%);
580. }
582. ::v-deep .el-badge__content {
583.   font-size: 11px;
584.   padding: 0 5px;
585. }
586. ::v-deep .is-fullscreen {
587.   .el-dialog__body {
588.     /* padding: 15px 20px !important; */
589.     color: #606266;
590.     font-size: 14px;
591.     word-break: break-all;
592.     height: calc(100vh - 40px);
593.     overflow: auto;
594.   }
595. }
597. </style>
598. <style>
599.   .bellClass .el-notification__icon::before {
600.     content: '\e7ba'; /* 需要更换的图标编码 */
601.     color: #8BC34A; /* 图标颜色 */
602.   }
603.   .bellClass {
604.     /*border: 1px solid #8bc34a57; !* 修改边框样式 f55e00 *!*/
605.     box-shadow: 0 2px 10px 0 rgb(0 0 0 / 48%) !important;
606.   }
607.    .el-notification__title {
608.     color: #000; /* 修改标题字体颜色 */
609.     font-size:12px;
610.     font-weight: 100;
611.   }
612.   .bellClass .el-notification__icon {
613.     height: 20px;
614.     width: 20px;
615.     font-size: 18px;
616.     transform: translateY(-2px);
617.   }
618.   .bellClass .el-notification__group {
619.     margin-left: 8px;
620.     margin-right: 8px;
621.   }
622. </style>

复制代码

焦点代码：
这个表现关照的焦点方法， 自界说消息组件 通过$createElement创建Vnode挂载到message中，
数据转达的话通过props转达，通过on自界说变乱

2.     showNotification() {
3.       // 如果已有通知实例且未关闭，先关闭
4.       if (this.notificationInstance) {
5.         this.$notify.closeAll()
6.       }
7.       const h = this.$createElement
8.       const notificationNode = h(CustomNotification, {
9.         key: this.notificationKey, // 添加唯一key
10.         props: {
11.           noticeList: [...this.noticeListNew], // 传递消息列表
12.           total:this.noticeListNew.length
13.         },
14.         on: {
15.           // 添加事件监听
16.           'update-list': this.handleListUpdate,
17.           'close-notification': () => this.$notify.closeAll(),
18.           'later': () => {
19.             this.$notify.closeAll()
20.           },
21.           'ignore-all': (localNoticeList) => {
22.             const msgList = localNoticeList
23.             msgList & msgList.forEach((item)=>{
24.               this.readMessageAll(item.messageId)
25.             })
26.             this.$notify.closeAll()
27.             this.getUnRead()
28.           },
29.           'accept': () => {
30.             console.log('接受处理逻辑')
31.           },
32.           close: () => {
33.             this.notificationInstance = null
34.           },
35.           'gotoMessageList': (msgId) => {
36.             this.readMessage(msgId)
37.             this.getUnRead()
38.             //阅读了那一条 根据ID匹配然后进行过滤
39.             this.noticeListNew = this.noticeListNew.filter(item=> item.messageId !== Number(msgId))
40.             if(this.noticeListNew.length > 0){
41.               this.customNotificationInstance.$set(
42.                 this.customNotificationInstance,
43.                 'noticeList',
44.                 [...this.noticeListNew]
45.               )
46.               this.customNotificationInstance.$forceUpdate()
47.             }else{
48.               this.$notify.closeAll()
49.             }
51.           }
52.         }
53.       })
55.       this.notificationInstance = this.$notify.info({
56.         title: '消息通知',
57.         message: notificationNode,
58.         customClass:'bellClass',
59.         position: 'bottom-right',
60.         duration:60000,
61.         onClose: () => {
62.           this.notificationInstance = null
63.         }
64.       });
65.       // 获取组件实例
66.       this.customNotificationInstance = notificationNode.componentInstance
67.     },

复制代码

获取当前弹窗的实例时数据通讯的关键！ 

2.     /** 处理新消息逻辑 */
3.     handleNewMessages(rows, total) {
4.       // 数据同步
5.       this.noticeListNew = rows
6.       this.totalNew = rows.length//total
7.       // 仅当有新消息时触发通知
8.       if (rows.length > 0) {
9.         if (this.notificationInstance) {
10.           // 手动创建组件实例
11.           // 通过 key 变化强制更新组件
12.           this.notificationKey = Date.now()
13.           // const NotificationComponent = new Vue({
14.           //   render: h => h(CustomNotification, {
15.           //     props: {
16.           //       noticeList: [...this.noticeListNew],
17.           //       total: this.noticeListNew.length
18.           //     },
19.           //     on: {
20.           //       // 事件监听...
21.           //     }
22.           //   })
23.           // }).$mount()
24.           // // 保存组件实例引用
25.           // this.customNotificationInstance = NotificationComponent.$children[0]
26.           // this.customNotificationInstance = this.notificationInstance.$children[0]
27.           //已有弹窗时仅更新数据
28.           this.customNotificationInstance.$set(
29.             this.customNotificationInstance,
30.             'noticeList',
31.             [...rows]
32.           )
33.           this.customNotificationInstance.$forceUpdate()
34.          } else {
35.           this.showNotification()
36.          }
37.       }
38.       this.$emit('update:noticeList', rows)
39.       window.clearInterval(this.pollInterval)
40.       this.setupPolling()// 启动轮询 后台发送消息时 自动触发
41.     },

复制代码

已有弹窗只更新数据 不弹窗