vue子组件（css定位代码自行修改）,在componets文件夹下新建bgmusic.vue文件：
<template><div class="music"><img v-if="isSpin" :style="{'animation-play-state':animat}" @click="spinSwitch()" src="../assets/img/complate_music@2x.png" alt="音乐开关"><img v-else :style="{'animation-play-state':animat}" @click="spinSwitch()" src="../assets/img/complate_stop_music@2x.png" alt="音乐开关"></div></template><script>export default {data () {return {animat: 'running',isSpin: true}},methods: {spinSwitch () {this.isSpin = !this.isSpinthis.animat = this.animat === 'running' ? 'paused' : 'running'}}}</script><style scoped>@keyframes spin{ 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);}}.music img{z-index: 999;position: fixed;right:0.8rem;top: 3.8rem;width: 2.5rem;height: 2.5rem;animation:spin 4s infinite linear;}</style>
在同级目录中新建index.js文件，用于导出组件：
export {default as Bgmusic } from './bgmusic.vue'
父组件中使用
<template><div class="home"><bg-music></bg-music></div></template><script>import { Bgmusic } from '../components'export default {name: 'Home',components: {'bg-music': Bgmusic,}}</script>
