VUE 페이지 사운드 + 제목 플래시 알림 구성요소 공유(사용 지침 포함)

이 글에서는 VUE 페이지 사운드 + 제목 플래시 알림 구성요소를 공유하겠습니다. 이 구성요소를 사용하는 방법이 모든 사람에게 도움이 되기를 바랍니다.

[관련 권장 사항: vuejs 비디오 튜토리얼, 웹 프론트 엔드 개발]

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: &#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>

(학습 영상 공유: vuejs 입문 튜토리얼, 기본 프로그래밍 영상)

위 내용은 VUE 페이지 사운드 + 제목 플래시 알림 구성요소 공유(사용 지침 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!