vue通知提醒消息怎么实现

今天小编给大家分享一下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>

五、项目实战

1、定义全局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通知提醒消息怎么实现”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。