目录

前言

一、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代码段是不是特别简单

      使用 HTML 片段    export default {    methods: {      open() {        this.$notify({          title: 'HTML 片段',          dangerouslyUseHTMLString: true,          message: '这是 HTML 片段'        });      }    }  }

五、项目实战

这里大概说一下我的流程，我这里需要建立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]        }      },