文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue通知提醒消息举例详解

2023-03-24 08:34

关注

前言

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

一、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。


	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通知提醒消息内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯