이 기사는 VUE에 대한 관련 지식을 제공합니다. 주로 VUE 페이지 사운드 + 제목 플래시 알림 구성 요소를 공유합니다. 관심 있는 친구는 아래를 살펴보는 것이 모든 사람에게 도움이 되기를 바랍니다.
A 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.js 비디오 튜토리얼"
위 내용은 VUE 페이지 사운드 + 제목 플래시 알림 구성요소 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!