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

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

新建一个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','新消息')

el-table合并行的通用方法（附js代码）

vue前端分页功能实现代码（附js代码）

el-table利用:row-style="rowClass"设置指定行变色

一款免费开源效果酷炫的 Vue / React 大屏数据展示组件库——DataV

vue项目动态设置background背景色，解决颜色被替换问题

标签：通知效果

上面是“vue项目如何实现标题闪烁通知效果（附带声音提示）”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2901.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！