本篇文章給大家?guī)?lái)了關(guān)于VUE的相關(guān)知識(shí),其中主要跟大家分享一個(gè)VUE頁(yè)面聲音+標(biāo)題閃爍通知的組件,感興趣的朋友下面一起來(lái)看一下吧,希望對(duì)大家有幫助。
一個(gè)VUE頁(yè)面聲音+標(biāo)題閃爍通知的組件
1、使用方法
【資料圖】
1.1 組件模板引用
<PageNotice ref="pageNotice" sound="/xxx/new_message.mp3" />
1.2 支持的參數(shù)
sound: 通知時(shí)播放的聲音
1.3 動(dòng)態(tài)調(diào)用方法
$refs.pageNotice.tip("你好","新消息") $refs.pageNotice.tip("有新客戶訪問(wèn)")2、組件源碼
PageNotice 組件源代碼如下
<template> <div> <audio ref="audio" :src="sound"></audio> </div></template><script>export default { name: "PageNotice", props: { sound: { type: String, default: "" }, }, data() { return { tipTimer: null, tipTimerCount: 0, titleOld: null, } }, methods: { tip(msg, type) { this.doPageTitle(msg, type) if (this.sound) { this.doPlaySound() } }, doClearTimer() { clearInterval(this.tipTimer) this.tipTimer = null if (this.titleOld) { window.document.title = this.titleOld } this.tipTimerCount = 0 }, doPageTitle(msg, type) { type = type || "提醒" if (this.tipTimer) { this.doClearTimer() } this.titleOld = document.title this.tipTimerCount = 0 this.tipTimer = setInterval(() => { this.tipTimerCount++ if (this.tipTimerCount % 2 === 0) { window.document.title = "【" + type + "】" + msg } else { window.document.title = "" + msg } if (this.tipTimerCount > 6) { this.doClearTimer() } }, 500) }, doPlaySound() { let audio = this.$refs.audio if (!audio) { return } try { audio.pause() audio.play() } catch (e) { } } }}</script>推薦學(xué)習(xí):《vue.js視頻教程》
以上就是分享一個(gè)VUE頁(yè)面聲音+標(biāo)題閃爍通知的組件的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!
關(guān)鍵詞: