本篇文章给大家带来了关于VUE的相关知识，其中主要跟大家分享一个VUE页面声音+标题闪烁通知的组件，感兴趣的朋友下面一起来看一下吧，希望对大家有帮助。
一个VUE页面声音+标题闪烁通知的组件
1、使用方法
(资料图片仅供参考)
1.1 组件模板引用
登录后复制1.2 支持的参数
sound: 通知时播放的声音
1.3 动态调用方法
$refs.pageNotice.tip("你好","新消息") $refs.pageNotice.tip("有新客户访问")登录后复制2、组件源码
PageNotice 组件源代码如下
<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>
登录后复制推荐学习：《vue.js视频教程》
以上就是分享一个VUE页面声音+标题闪烁通知的组件的详细内容，更多请关注php中文网其它相关文章！
关键词：
