环球快讯:分享一个VUE页面声音+标题闪烁通知的组件

时间:2023-03-14 18:10:49       来源:转载

本篇文章给大家带来了关于VUE的相关知识,其中主要跟大家分享一个VUE页面声音+标题闪烁通知的组件,感兴趣的朋友下面一起来看一下吧,希望对大家有帮助。

一个VUE页面声音+标题闪烁通知的组件

1、使用方法


(资料图片仅供参考)

1.1 组件模板引用

登录后复制

1.2 支持的参数

sound: 通知时播放的声音

1.3 动态调用方法

$refs.pageNotice.tip("你好","新消息") $refs.pageNotice.tip("有新客户访问")
登录后复制

2、组件源码

PageNotice 组件源代码如下

<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中文网其它相关文章!

关键词: