ホームページ > 記事 > ウェブフロントエンド > VUE ページのサウンド + タイトル フラッシュ通知コンポーネントを共有する (使用説明付き)
この記事では、VUE ページのサウンド タイトル フラッシュ通知コンポーネントを紹介します。このコンポーネントの使用方法について説明しましょう。皆さんのお役に立てれば幸いです。
[関連する推奨事項: vuejs ビデオ チュートリアル、Web フロントエンド開発]
1.1 コンポーネント テンプレートのリファレンス
<PageNotice ref="pageNotice" sound="/xxx/new_message.mp3" />
1.2 サポートされているパラメータ
##sound: 通知中に再生されるサウンド1.3 動的呼び出しメソッド$refs.pageNotice.tip('你好','新消息') $refs.pageNotice.tip('有新客户访问')2. コンポーネントのソースコード Page Notice コンポーネントのソースコードは次のとおりです
<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>(学習ビデオ共有:
vuejs 入門チュートリアル 、基本プログラミング ビデオ)
以上がVUE ページのサウンド + タイトル フラッシュ通知コンポーネントを共有する (使用説明付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。