vue 全局背景音乐

<template><div id="app"><router-view /><!-- 背景音乐 --><audio src="./assets/bj.mp3"loop='true'autoplay="autoplay"ref="MusicPlay"hidden></audio></div>
</template>

在app.vue里放音乐，然后使用ref="MusicPlay"

在首页/或者你想调用的页面

html部分

<!-- 背景音乐 --><div class="bjmc" @click="cyinpin()" ><img v-if="yinpin" src="../assets/laba/laba.png" alt=""><img v-else src="../assets/laba/laba-active.png" alt=""></div>

方法里

cyinpin(){this.yinpin=!this.yinpin
if(this.yinpin===true){this.$parent.$refs.MusicPlay.play();
}else{
this.$parent.$refs.MusicPlay.pause();
}this.msg="稍等！"this.alertShows=truesetTimeout(()=>{this.alertShows=false},500)},

vue 全局背景音乐相关推荐

VUE全局导航守卫、请求、响应拦截器的设置
文件设置参考地址:https://gitee.com/wang_yu5201314/headlines__news/tree/master/%E9%A1%B9%E7%9B%AE%E6%BA%90%E7 ...
vue 全局函数的定义与任意调用（代码篇）
文章目录 vue 全局函数的定义与任意调用方法一: 首先: 之后: 最后: 打印结果 · 截图: 方法二:[推荐] 代码:注意事项: vue 全局函数的定义与任意调用方法一: 首先: 随意新建 ...
VUE 全局监听sessionStorage变化
VUE 全局监听sessionStorage变化另参考: (转)vue中监听sessionStorage的变化
Vue:全局拦截所有请求，并在请求头中添加token
Vue:全局拦截所有请求,并在请求头中添加token 在实际的项目中,为了登录的安全,token是必不可少的,所以就需要前后端配合,后端生成和验证token(这方面我也写过博客,讲述后端对token的 ...
vue全局修改设置滚动条样式
::-webkit-scrollbar{ /*滚动条整体样式*/width: 10px; /*高宽分别对应横竖滚动条的尺寸*/height: 1px; } ::-webkit-scrollbar-th ...
vue 全局动态修改title、keywords、description；vue常用挂载的方法，自定义指令；
vue 全局动态修改title.keywords.description 路由: {path: "xxx",name: "xxx",component: () ...
Vue全局注册公共组价
Vue全局注册公共组价
【Vue 公众号网页设置全局背景音乐】
因为是全局的背景音乐,所以控制音乐的图标和音乐资源都应该在App.vue中 <template><div id="app"><img :class=& ...
Vue全局路由侦听beforeEach路由守卫附代码使用示例
使用路由守卫beforeEach,可以实现路由侦听: 全局侦听路由跳转的实现代码: app.vue onLaunch: function(e) {this.$router.beforeEach((to ...
vue 全局排序_搞定VUE [ 一 ]
击上方蓝字关注我首先.以我个人的观点,不赞成把这些东西死记下来,会使用,能上手做,有不明白的及时的去浏览.翻阅,在实战中去快速的理解和掌握,之后水到渠成式的一步步去走向深入.当然,从自身的职 ...

vue 全局背景音乐

vue 全局背景音乐相关推荐

最新文章

热门文章