目录
前言
一、Notification
二、Notification引用
1.全局引用
2.单独引用
三、参数说明
四、简单案例
五、项目实战
1、定义全局Notification。
2、Websocket实时接收通知。
3、消息通知
前言
最近有个项目需求就是在客户端的右上角要实时展示提醒消息，下面来看下简单的实现步骤
一、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]
}
},