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

总结

关于vue通知提醒消息的文章就介绍至此，更多相关vue通知提醒消息内容请搜索编程宝库以前的文章，希望以后支持编程宝库！

 vue mounted拿不到props中传递的数据父组件向子组件传递参数子组件使用props获取但是当子组件中代码异步的时候，可能会出现created和mounted中取不 ...