让做网站策划没经验怎么办,品牌买购网,河南省建设厅执业资格注册中心网站,深圳制作网站培训学校说明#xff1a;一个全局播放的背景音乐#xff0c;首页无音乐无音乐图标#xff0c;在首页互动跳转页面并开始播放音乐#xff0c;切换页面不需暂停音乐也不会重置音乐#xff0c;可以通过音乐图标控制暂停或播放。 MusicPlay.vue#xff08;音乐组件#xff09;
…
说明一个全局播放的背景音乐首页无音乐无音乐图标在首页互动跳转页面并开始播放音乐切换页面不需暂停音乐也不会重置音乐可以通过音乐图标控制暂停或播放。 MusicPlay.vue音乐组件
template
div :class[{musicPlay:isPlaying},music] v-showisMusic clickmusicPlay
svg classicon viewBox0 0 1024 1024path dM875.52 433.152q-7.168-1.024-12.8-10.24t-8.704-33.792q-5.12-39.936-26.112-58.88t-65.024-27.136q-46.08-9.216-81.408-37.376t-58.88-52.736q-22.528-21.504-34.816-15.36t-12.288 22.528l0 44.032 0 96.256q0 57.344-0.512 123.904t-0.512 125.952l0 104.448 0 58.368q1.024 24.576-7.68 54.784t-32.768 56.832-64 45.568-99.328 22.016q-60.416 3.072-109.056-21.504t-75.264-61.952-26.112-81.92 38.4-83.456 81.92-54.272 84.992-16.896 73.216 5.632 47.616 13.312l0-289.792q0-120.832 1.024-272.384 0-29.696 15.36-48.64t40.96-22.016q21.504-3.072 35.328 8.704t28.16 32.768 35.328 47.616 56.832 52.224q30.72 23.552 53.76 33.792t43.008 18.944 39.424 20.992 43.008 39.936q23.552 26.624 28.672 55.296t0.512 52.224-14.848 38.4-17.408 13.824z/path/svg
audio refaudioPlayer idaudioPlayer :srcmusicUrl controlscontrols autoplay looptrue hiddentrue playhandlePlay pausehandlePause/audio
/div
/template
script setup
import {defineComponent,getCurrentInstance,defineProps,defineEmits,defineExpose,ref,reactive,watch} from vue;defineProps({})//使用vue的getCurrentInstance 方法获取当前组件实例
const { proxy } getCurrentInstance()let musicUrl require(/assets/images/music.mp3) //音乐地址
let audioPlayer ref(null) //音乐
let isPlaying ref(false) //是否播放动画效果//播放按钮
const musicPlay (){if(isPlaying.value) {audioPlayer.value.pause()isPlaying.value false} else {audioPlayer.value.play()isPlaying.value true}
}//播放监听
const handlePlay () {isPlaying.value true
}//暂停监听
const handlePause () {isPlaying.value false
}//音乐图标是否显示(首页隐藏图标)
let isMusic ref(false) //音乐图标是否显示
watch(()proxy.$router.currentRoute.value.path,(newV,oldV){if(newV ! /){isMusic.value true}
})/script
style
.music{width:4rem;height:4rem;border-radius:4rem;position:fixed;left:1rem;top:1rem;z-index:999;display:flex;align-items:center;background:#419035;justify-content:center;}
.musicPlay{animation:rotate 5s linear infinite;}
.music .icon{width:2rem;height:2rem;fill:#c3db60;}
.music audio{display:none;}
keyframes rotate{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
/styleApp.vue(使用音乐组件)
template!--app.vue其他代码--!--组件使用--
music-play/music-play!--app.vue其他代码--/template
script setup//引入组件
import MusicPlay from /components/MusicPlay.vue/script
index.vue(页面起始页首页)
template
div!--其他html--
!--注: 除app.vue引入音乐组件 其他页面均不需再引用--div clickgoPass点击开始/div/div
/template
script setup
import {defineComponent,getCurrentInstance,ref,reactive,computed,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered,onActivated,onDeactivated,onServerPrefetch,toRaw,watch} from vue;//使用vue的getCurrentInstance 方法获取当前组件实例
const { proxy } getCurrentInstance()//去开启音乐并跳转其他页
const goPass () {//捕获页面中的id为audioPlayer的音乐标签(MusicPlay.vue)let audioPlayer document.getElementById(audioPlayer)//设置音乐开始播放audioPlayer.play()//跳转其他页面proxy.$router.push(/xxxxxx)
}
/script
