添加音乐

src/components/Music.vue

+<template>
+  <div class="music-box">
+    <div class="music" ref="music">
+      <img ref="musicImg" class="musicImg animate" :src="isPlaying?imgStart:imgEnd" alt />
+    </div>
+    <audio id="music" :src="map3Src" autoplay loop></audio>
+  </div>
+</template>
+
+<script>
+import music1 from '@/assets/mp3/music.mp3';
+import start1 from '@/assets/mp3/start.png';
+import pause1 from '@/assets/mp3/pause.png';
+
+export default {
+  data() {
+    return {
+      isPlaying: true,
+      // map3Src: require('@/assets/mp3/music.mp3'),
+      // imgStart: require('@/assets/images/01/start.png'),
+      // imgEnd: require('@/assets/images/01/pause.png'),
+      map3Src: music1,
+      imgStart: start1,
+      imgEnd: pause1
+    }
+  },
+  mounted() {
+
+    this.weixinAutoPlay()
+    this.playMusic()
+
+  },
+  methods: {
+    playMusic() {
+      var _this = this
+
+      this.isPlaying = true;
+      // var container = $('.music')[0];
+      // var image = $('.musicImg')[0];
+      var container = this.$refs.music;
+      var image = this.$refs.musicImg;
+
+      image.addEventListener('click', () => {
+        this.isPlaying ? pause() : play();
+      });
+
+      function pause() {
+        _this.isPlaying = false;
+        var iTransform = getComputedStyle(image).transform;
+        var cTransform = getComputedStyle(container).transform;
+        container.style.transform = cTransform === 'none'
+          ? iTransform
+          : iTransform.concat(' ', cTransform);
+        image.classList.remove('animate');
+        music.pause();
+      }
+
+      function play() {
+        _this.isPlaying = true;
+        image.classList.add('animate');
+        music.play();
+      }
+    },
+    weixinAutoPlay() {
+      try {
+        // 微信自动播放音乐
+        document.addEventListener('DOMContentLoaded', function () {
+          function audioAutoPlay() {
+            var audio_ = document.getElementById('music');
+            audio_.play();
+            document.addEventListener("WeixinJSBridgeReady", function () {
+              audio_.play();
+            }, false);
+          }
+          audioAutoPlay();
+        });
+      } catch (error) {
+
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@r: 75rem;
+
+.animate {
+  -webkit-animation: round 10s linear infinite;
+  animation: round 10s linear infinite;
+}
+@-webkit-keyframes round {
+  100% {
+    -webkit-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+@keyframes round {
+  100% {
+    -webkit-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+
+.music-box {
+  position: absolute;
+  top: 3%;
+  right: 3%;
+  z-index: 100000;
+
+  .music {
+    width: 70 / @r;
+    height: 70 / @r;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .start {
+    // background: url("../assets/images/01/start.png") no-repeat;
+    background-size: contain;
+  }
+
+  .pause {
+    // background: url("../assets/images/01/pause.png") no-repeat;
+    background-size: contain;
+  }
+}
+</style>

src/views/Home.vue

 <template>
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png" />
-    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
     <h1>home页{{msg}}</h1>
     <button @click="testJump">跳转详情</button>
+    <Music />
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+import Music from '@/components/Music.vue'
 
 export default {
   name: 'home',
@@ -30,7 +30,7 @@ export default {
     }
   },
   components: {
-    HelloWorld
+    Music
   }
 }
 </script>