vue通知提醒消息举例详解

前言

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

一、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]
       }
     },

来源：https://blog.csdn.net/weixin_55853065/article/details/127360779