vue通知提醒消息舉例詳解
更新時間：2023年03月24日 08:49:25 作者：混世大魔王955
在項目開發(fā)過程中,可能需要實現(xiàn)以下場景,未讀消息提示、報警信息、消息通知等,下面這篇文章主要給大家介紹了關(guān)于vue通知提醒消息的相關(guān)資料,需要的朋友可以參考下
前言
最近有個項目需求就是在客戶端的右上角要實時展示提醒消息，下面來看下簡單的實現(xiàn)步驟
一、Notification
這是基于懸浮出現(xiàn)在頁面角落，顯示全局的通知提醒消息。這個elmennt-ui組件可以實現(xiàn)我們上面的功能。
二、Notification引用
1.全局引用
element 為 Vue.prototype 添加了全局方法 $notify。因此在 vue instance 中可以采用本頁面中的方式調(diào)用 Notification。
2.單獨引用
import { Notification } from 'element-ui';此時調(diào)用方法為 Notification(options)。我們也為每個 type 定義了各自的方法，如 Notification.success(options)。并且可以調(diào)用 Notification.closeAll() 手動關(guān)閉所有實例。
三、參數(shù)說明
四、簡單案例
右上角就會彈出我們寫的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>五、項目實戰(zhàn)
這里大概說一下我的流程，我這里需要建立Websocket連接，服務(wù)器實時推送信息給客戶端在右上角展示，這里需要用到Websocket以及本章學(xué)的通知。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('數(shù)據(jù)發(fā)送...')
},
websocketonerror(e) {
//連接建立失敗重連
setTimeout(() => {
this.initWebSocket()
}, 10000)
console.log('故障連接出錯~')
},
websocketonmessage(evt) {
var monitorData = evt.data
monitorData = JSON.parse(monitorData)
this.switchOther(this.troublePush, monitorData)
},
//根據(jù)數(shù)據(jù)判斷進(jìn)行彈框(緊急呼叫，長時間關(guān)人)
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('故障推送關(guān)閉~')
},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()
},
//關(guān)閉當(dāng)前故障彈框
handleQuXiao(monitorItem) {
this.openDialogflase = false
this.notifications[monitorItem.orderKey].close()
delete this.notifications[monitorItem.orderKey]
},
//關(guān)閉所有彈窗
closeAll() {
let vue = this
for (let key in vue.notifications) {
vue.notifications[key].close()
delete vue.notifications[key]
}
},總結(jié)
到此這篇關(guān)于vue通知提醒消息的文章就介紹到這了,更多相關(guān)vue通知提醒消息內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
Vue.js結(jié)合bootstrap實現(xiàn)分頁控件
這篇文章主要為大家詳細(xì)介紹了Vue.js 合bootstrap實現(xiàn)分頁控件的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
在開發(fā)過程中,有時候會遇到這么一種情況,通過動態(tài)的賦值,但是dom沒有及時更新,能夠獲取到動態(tài)賦的值,但是無法獲取到雙向綁定的dom節(jié)點,這就需要我們手動進(jìn)行強(qiáng)制刷新組件,下面這篇文章主要給大家介紹了關(guān)于vue組件強(qiáng)制刷新的4種方案,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Element-ui upload上傳文件限制的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
淺談Vuex的this.$store.commit和在Vue項目中引用公共方法
這篇文章主要介紹了淺談Vuex的this.$store.commit和在Vue項目中引用公共方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue子組件向父組件通信與父組件調(diào)用子組件中的方法
這篇文章主要介紹了Vue子組件向父組件通信與父組件調(diào)用子組件中的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
vue-cli3 項目優(yōu)化之通過 node 自動生成組件模板 generate View、Component
這篇文章主要介紹了vue-cli3 項目優(yōu)化之通過 node 自動生成組件模板 generate View、Component的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
在Vue3.5版本中最大的改動就是響應(yīng)式重構(gòu),重構(gòu)后性能竟然炸裂的提升了56%,本文我們來講講使用雙向鏈表后,Vue內(nèi)部是如何實現(xiàn)依賴收集和依賴觸發(fā)的,感興趣的可以了解下2024-11-11
這篇文章給大家介紹了Vue.js項目部署到服務(wù)器的詳細(xì)步驟，既然是部署到服務(wù)器，肯定是需要一個云的。具體思路步驟大家可以參考下本文2017-07-07
vue-element換膚所有主題色和基礎(chǔ)色均可實現(xiàn)自主配置
這篇文章主要介紹了vue-element換膚所有主題色和基礎(chǔ)色均可實現(xiàn)自主配置，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue初嘗試--項目結(jié)構(gòu)的相關(guān)知識,需要的朋友可以參考下2018-01-01