vue通知提醒消息(vue 提示)

vue通知提醒消息

目录

前言

一、Notification

二、Notification引用

           1.全局引用

           2.单独引用

三、参数说明

四、简单案例 

五、项目实战

1、定义全局Notification。

2、Websocket实时接收通知。

3、消息通知

---

前言

推荐整理分享vue通知提醒消息(vue 提示)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue系统通知,vue推送消息,vue 消息通知,vue 提示,vue消息框,vue 消息通知,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>五、项目实战

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