vue 全局背景音乐

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

宋允秀

2959人浏览 · 2021-11-12 13:32:37

宋允秀 · 2021-11-12 13:32:37 发布

<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=true
		setTimeout(()=>{
			this.alertShows=false
		},500)
	  },

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^