VUE页面声音+标题闪烁通知组件怎么使用

这篇文章主要介绍“Vue页面声音+标题闪烁通知组件怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“VUE页面声音+标题闪烁通知组件怎么使用”文章能帮助大家解决问题。

一个VUE页面声音+标题闪烁通知的组件

使用方法

1 组件模板引用

<PageNotice ref="pageNotice" sound="/xxx/new_message.mp3" />

2 支持的参数

sound: 通知时播放的声音

3 动态调用方法

$refs.pageNotice.tip('你好','新消息') $refs.pageNotice.tip('有新客户访问')

组件源码

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>

关于“VUE页面声音+标题闪烁通知组件怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。