亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

VUE頁面聲音和標題閃爍通知組件怎么使用

發布時間:2022-12-13 10:15:37 來源:億速云 閱讀:288 作者:iii 欄目:編程語言

本文小編為大家詳細介紹“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頁面聲音和標題閃爍通知組件怎么使用”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

vue
AI

大石桥市| 许昌市| 黄平县| 灌阳县| 顺义区| 佳木斯市| 自治县| 达日县| 加查县| 灵石县| 依安县| 富裕县| 杂多县| 綦江县| 舒兰市| 颍上县| 鹰潭市| 香格里拉县| 滁州市| 蒲江县| 项城市| 阜平县| 卓尼县| 揭西县| 新竹县| 湘阴县| 临汾市| 驻马店市| 商南县| 浦江县| 元江| 铜鼓县| 广元市| 县级市| 贵南县| 房产| 庄河市| 屯门区| 阜新| 久治县| 隆安县|