首頁 > web前端 > Vue.js > 主體

分享一個VUE頁面聲音+標題閃爍通知的元件

藏色散人
發布: 2023-03-14 17:28:38
轉載
1512 人瀏覽過

這篇文章為大家帶來了關於VUE的相關知識,其中主要跟大家分享一個VUE頁面聲音 標題閃爍通知的組件,感興趣的朋友下面一起來看一下吧,希望對大家有幫助。

分享一個VUE頁面聲音+標題閃爍通知的元件

一個VUE頁面聲音標題閃爍通知的元件

1、使用方法

1.1 元件範本引用

<PageNotice ref="pageNotice" sound="/xxx/new_message.mp3" />
登入後複製

1.2 支援的參數

sound: 通知時播放的聲音

1.3 動態呼叫方法

$refs.pageNotice.tip(&#39;你好&#39;,&#39;新消息&#39;) $refs.pageNotice.tip(&#39;有新客户访问&#39;)
登入後複製

2、元件原始碼

PageNotice 元件原始碼如下

<template>
    <div>
        <audio ref="audio" :src="sound"></audio>
    </div>
</template>
<script>
export default {
    name: "PageNotice",
    props: {
        sound: {
            type: String,
            default: &#39;&#39;
        },
    },
    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 || &#39;提醒&#39;
            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 = &#39;【&#39; + type + &#39;】&#39; + msg
                } else {
                    window.document.title = &#39;&#39; + 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中文網其他相關文章!

相關標籤:
vue
來源:learnku.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板