vue.js 3.2.22：自動旋轉的音樂播放按鈕

一，演示代碼:

Home.vue

<template>
<div style="width:100%;height: 100vh;">
<div :class="statusClass" @click="buttonClick" style="position:fixed;right:30px;top:30px;"></div>
  <audio ref="music" src="/static/audio/SeeYouAgain.mp3" class="media-audio" loop autoplay ></audio>
</div>
</template>

<script>
import {ref} from "vue"
export default {
  name: "Home",
  setup() {
    //music ref
    const music = ref()
    //class
    const statusClass = ref("stoping")
    //點擊播放按鈕
    const buttonClick = () => {
        //alert('buttonClick');
         if (statusClass.value === "stoping") {
             //開始播放
              play();
         } else {
             //停止播放
              stop();
         }
    }

    //播放
    const play = () => {
      statusClass.value = "playing";
      music.value.play();
    }

    //停止
    const stop = () => {
      statusClass.value = "stoping";
      music.value.pause();
    }

    return {
      buttonClick,
      music,
      statusClass,
    }
  }
}
</script>

<style scoped>
.playing{background: url('/static/img/music_on.png') no-repeat 0 0;width: 44px;height: 44px;animation: rotating 1.2s linear infinite;}
.stoping{background: url('/static/img/music_off.png') no-repeat 0 0;width: 44px;height: 44px;}
@keyframes rotating {
  from{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to{
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>

說明：劉宏締的架構森林是一個專注架構的博客，地址：https://www.cnblogs.com/architectforest

         對應的源碼可以訪問這里獲取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

說明：作者:劉宏締 郵箱: [e-mail]

二，測試效果

停止時：

 

 

播放時:

三，查看vue的版本:

liuhongdi@lhdpc:/data/vue/audio$ npm list vue
audio@0.1.0 /data/vue/audio
├─┬ @vue/cli-plugin-babel@4.5.15
│ └─┬ @vue/babel-preset-app@4.5.15
│   └── vue@3.2.22 deduped
└─┬ vue@3.2.22
  └─┬ @vue/server-renderer@3.2.22
    └── vue@3.2.22 deduped