您好,登錄后才能下訂單哦!
今天小編給大家分享一下vue通知提醒消息怎么實(shí)現(xiàn)的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
這是基于懸浮出現(xiàn)在頁(yè)面角落,顯示全局的通知提醒消息。這個(gè)elmennt-ui組件可以實(shí)現(xiàn)我們上面的功能。
element 為 Vue.prototype
添加了全局方法 $notify
。因此在 vue instance 中可以采用本頁(yè)面中的方式調(diào)用 Notification。
import { Notification } from 'element-ui';
此時(shí)調(diào)用方法為 Notification(options)
。我們也為每個(gè) type 定義了各自的方法,如 Notification.success(options)
。并且可以調(diào)用 Notification.closeAll()
手動(dòng)關(guān)閉所有實(shí)例。
右上角就會(huì)彈出我們寫的html代碼段是不是特別簡(jiǎn)單
<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>
/* 全局Notification */ Vue.prototype.$baseNotify = (message, title, type, position) => { Notification({ title: title, message: message, position: position || 'top-right', type: type || 'success', duration: messageDuration, }) }
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定時(shí)心跳 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('故障連接出錯(cuò)~') }, websocketonmessage(evt) { var monitorData = evt.data monitorData = JSON.parse(monitorData) this.switchOther(this.troublePush, monitorData) }, //根據(jù)數(shù)據(jù)判斷進(jìn)行彈框(緊急呼叫,長(zhǎng)時(shí)間關(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)閉~') },
//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, }) //將通知實(shí)例放入 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] } },
以上就是“vue通知提醒消息怎么實(shí)現(xiàn)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。