目录

前言

一    
    
    
、Notification

二    


     


     


   、Notification引用

           1.全局引用

           2.单独引用

三




 




 




 

、参数说明

四   

   

   

、简单案例 

五     

     

     

  、项目实战

1




  




  




  
、定义全局Notification   
    
    
   。

2
  


  


  


、Websocket实时接收通知


     


     


     

。

3     
     
     
 、消息通知

前言

最近有个项目需求就是在客户端的右上角要实时展示提醒消息   
    
    
   ，下面来看下简单的实现步骤

一 




   




   




   、Notification

这是基于悬浮出现在页面角落


     


     


     

，显示全局的通知提醒消息 




 




 




。这个elmennt-ui组件可以实现我们上面的功能   

   

   

  。

二

 



 



 



、Notification引用

1.全局引用

element 为 Vue.prototype 添加了全局方法 $notify

     

     

     
。因此在 vue instance 中可以采用本页面中的方式调用 Notification
  




  




  




。

2.单独引用

import { Notification } from element-ui;

此时调用方法为 Notification(options)  


  


  


 。我们也为每个 type 定义了各自的方法 




 




 




，如 Notification.success(options) 
     
     
     。并且可以调用 Notification.closeAll() 手动关闭所有实例

   




   




   




。

三               、参数说明

四  




    




    




    、简单案例 

右上角就会弹出我们写的html代码段是不是特别简单

<template> <el-button plain @click="open"> 使用 HTML 片段 </el-button> </template> <script> export default { methods: { open() { this.$notify({ title: HTML 片段, dangerouslyUseHTMLString: true, message: <strong>这是 <i>HTML</i> 片段</strong> }); } } } </script>

五
















、项目实战

这里大概说一下我的流程   

   

   

  ，我这里需要建立Websocket连接

     

     

     
，服务器实时推送信息给客户端在右上角展示
  




  




  




，这里需要用到Websocket以及本章学的通知 



 



 



。Websocket在前一章有讲                 。案例仅供参考


    




    




    



。

1               、定义全局Notification














。

/* 全局Notification */ Vue.prototype.$baseNotify = (message, title, type, position) => { Notification({ title: title, message: message, position: position || top-right, type: type || success, duration: messageDuration, }) }

2   



     



     



    、Websocket实时接收通知                 。

initWebSocket() { const token = getAccessToken() const wsurl = `${this.troubelUrl}?code=trouble&token=${token}` this.twebsock = new WebSocket(wsurl) this.twebsock.onmessage = this.websocketonmessage this.twebsock.onopen = this.websocketonopen this.twebsock.onerror = this.websocketonerror this.twebsock.onclose = this.websocketclose }, websocketonopen() { //webscoket定时心跳 this.troubleTimer = setInterval(() => { let pageUrl = window.location.hash if (pageUrl !== && pageUrl !== #/login) { this.websocketsend(heartbeat) } }, 50000) console.log(数据发送...) }, websocketonerror(e) { //连接建立失败重连 setTimeout(() => { this.initWebSocket() }, 10000) console.log(故障连接出错~) }, websocketonmessage(evt) { var monitorData = evt.data monitorData = JSON.parse(monitorData) this.switchOther(this.troublePush, monitorData) }, //根据数据判断进行弹框(紧急呼叫  


  


  


 ，长时间关人) switchOther(switchValue, monitorData) { if (switchValue === true || switchValue === true) { this.handleOpen(monitorData) } }, websocketsend(data) { this.twebsock.send(data) }, websocketclose(e) { if (this.twebsock == null) { return } this.twebsock.close() this.twebsock = null clearInterval(this.troubleTimer) console.log(故障推送关闭~) },

3
















、消息通知

//monitorItem取的前面Websocket返回回来的值 handleOpen(monitorItem) { this.openDialogflase = true const h = this.$createElement let notify = this.$notify({ title: monitorItem.troubleType, message: h(p, null, [ h( span, { style: { display: inline-block, margin: 0 0 10px 0, }, }, `${monitorItem.projectName}-${monitorItem.useCode}` ), h( p, { style: { display: flex, alignItems: center, justifyContent: space-between, margin: 0 0 5px 0, }, }, [ h(span, null, monitorItem.duration), h( span, { style: { color: #efefef, }, }, monitorItem.fromType ), ] ), h(p, null, monitorItem.address), h( button, { style: { padding: 5px 20px, fontSize: 14px, borderRadius: 4px, color: #fff, background: #ff575a, border: none, margin: 10px 10px 0 0, display: inline-block, }, on: { click: this.clickBtn.bind(this, monitorItem), }, }, 查看详情 ), h( button, { style: { padding: 5px 20px, fontSize: 14px, borderRadius: 4px, color: #fff, background: #ff575a, border: none, margin: 10px 10px 0 0, display: inline-block, }, on: { click: this.handleShi.bind(this, monitorItem), }, }, 双向视频 ), h( button, { style: { padding: 5px 20px, fontSize: 14px, borderRadius: 4px, color: #fff, background: #ff575a, border: none, margin: 10px 0 0 0, display: inline-block, }, on: { click: this.handleQuXiao.bind(this, monitorItem), }, }, 取消 ), ]), duration: 0, showClose: false, }) //将通知实例放入 this.notifications[monitorItem.orderKey] = notify this.handleAudio() }, //关闭当前故障弹框 handleQuXiao(monitorItem) { this.openDialogflase = false this.notifications[monitorItem.orderKey].close() delete this.notifications[monitorItem.orderKey] }, //关闭所有弹窗 closeAll() { let vue = this for (let key in vue.notifications) { vue.notifications[key].close() delete vue.notifications[key] } },