首页 > 教程 >
分享一个VUE页面声音+标题闪烁通知的组件(附使用方法)
2023-02-23教程围观次
简介本篇文章给大家分享一个VUE页面声音+标题闪烁通知的组件,聊聊具体怎么使用这个组件,希望对大家有所帮助。1.使用方法1.1组件模板引用1.2支持的参数sound:通知时播放的声音1.3动态调用方法$refs.pageNotice.tip('你好','新消息')$refs.pageNotice.tip('有新客户访问')2.组件源码PageNotice组件源代码如下exportdefault{nam
本篇文章给大家分享一个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>< >export default { name: "PageNotice", props: { sound: { type: String, default: '' }, }, data() { return { tipTimer: null, tipTimerCount: 0, Old: null, } }, methods: { tip(msg, type) { this.doPage (msg, type) if (this.sound) { this.doPlaySound() } }, doClearTimer() { clearInterval(this.tipTimer) this.tipTimer = null if (this. Old) { window.document. = this. Old } this.tipTimerCount = 0 }, doPage (msg, type) { type = type || '提醒' if (this.tipTimer) { this.doClearTimer() } this. Old = document. this.tipTimerCount = 0 this.tipTimer = setInterval(() => { this.tipTimerCount++ if (this.tipTimerCount % 2 === 0) { window.document. = '【' + type + '】' + msg } else { window.document. = '' + msg } if (this.tipTimerCount > 6) { this.doClearTimer() } }, 500) }, doPlaySound() { let audio = this.$refs.audio if (!audio) { return } try { audio.pause() audio.play() } catch (e) { } } }}</ >
下载链接:网站源码/小程序源码/网站模板下载
下载排行
最新发布
-
最新去水印小程序源码分享/无需后台/对接接口/支持全网去水印功能
-
群多多社群人脉H5-2.1.4多开插件+小程序独立前端+搭建教程
-
七夕情侣飞行棋游戏限定版本源码/解锁版
-
苹果CMS海螺模版V20修复版/加广告代码
-
宠物社区风格 商业版(GBK)Discuz模板
-
全新UI基于Thinkphp的最新自助打印系统/云打印小程序源码/附教程
-
易优CMS家纺家居装饰类网站模板/EyouCMS家具家居类企业网站模板
-
EyouCMS艺术***摄影工作室网站模板/易优CMS摄影工作室网站模板
-
易优CMS响应式精品茶具实木茶盘销售网站模板/EyouCMS响应式酒水饮料类企业网站模板
-
EyouCMS响应式推土机挖掘机机械类网站模板/易优CMS机械设备类企业网站模板