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

发布时间:2023-03-14 17:57:00 作者:iii
来源:亿速云 阅读:104

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

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

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>

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

推荐阅读:
  1. vue和js区别有哪些
  2. Vue组件传值过程中丢失数据怎么办

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:sql_mode的模式有哪些

下一篇:Go怎么快速实现驱动层流量抓包

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》