vue中实现音乐图标点击播放/暂停的组件

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.isSpin
      this.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>

效果图