本篇文章给大家分享一个VUE页面声音+标题闪烁通知的组件，聊聊具体怎么使用这个组件 ，希望对大家有所帮助。
【相关推荐：vuejs视频教程、web前端开发】
1.使用方法
1.1 组件模板引用
<PageNotice ref="pageNotice" sound="/xxx/new_message.mp3" />1.2 支持的参数
sound: 通知时播放的声音
1.3 动态调用方法
$refs.pageNotice.tip('你好','新消息') $refs.pageNotice.tip('有新客户访问')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>（学习视频分享：vuejs入门教程、编程基础视频）
以上就是分享一个VUE页面声音+标题闪烁通知的组件（附使用方法）的详细内容，更多请关注编程网其它相关文章！
