vue项目如何实现标题闪烁通知效果（附带声音提示）

vue项目如何实现标题闪烁通知，并且附带声音提示效果！下面编程教程网小编带大家了解一下！

新建一个Notice组件

<template>
  <div>
    <audio ref="audio" :src="sound"></audio>
  </div>
</template>
<script>
export default {
  name: "Notice",
  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>

Notice组件引用

<noticeCon ref="noticeConRefs" sound="message.mp3"></noticeCon>

调用方法

this.$refs.noticeConRefs.tip('hello','新消息')

以上是编程学习网小编为您介绍的“vue项目如何实现标题闪烁通知效果（附带声音提示）”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。