一.點選底下的歌曲播放頭像，會顯示歌單詳情

1.新建playMusic元件

2.在playcontroller引入元件，註冊及使用

3.預設歌單詳情不顯示

<playMusic v-show="show"></playMusic>

data() {
            return {
                paused: true,
                show:false//歌單詳情是否顯示
            }
        },

4.控制歌單詳情的顯示(show取反)

<div class="left" @click="show=!show">
 

5.設定返回按鈕

在playMusic.vue裡面

 <div class="playMusic">
            <div class="back" >
                <svg class="icon" aria-hidden="true"  @click="$emit('myback')">
                    <use xlink:href="#icon-sdf"></use>
​
                </svg>
            </div>

playController.vue自定義觸發事件取反

<!--使用歌單詳情元件-->
<playMusic v-show="show" @myback="show=!show"></playMusic>

二.構建歌曲詳情頁面

1.playController.vue傳參

        <playMusicv :play="play" :paused="paused" :playDetail="playlist[playCurrentIndex]" v-show="show" @myback="show=!show"></playMusicv>
​

2.子元件接收

        props:['playDetail','paused','play']//接收歌曲詳情，歌曲暫停，play函式控制播放與暫停
​
 

3.大的背景圖

        <div class="bg" :style="{backgroundImage:`url(${playDetail.al.picUrl})`}"></div>
​

4.跑馬燈效果

   <marquee behavior="scroll" direction="left">{{playDetail.name}}</marquee>

5.播放時的唱片小白條設定

動態class繫結 ，當條件為true時新增class名稱

:class="{active:!paused}"

active:true 音樂播放，active:false 音樂暫停

  <div class="playContent">
        <img class="needle" :class="{active:!paused}" src="@/assets/img/needle-ip6.png" alt="">
        <img class="disc" src="@/assets/img/disc-ip6.png" alt="">
        <img class="playImg" :src="playDetail.al.picUrl" alt="">
    </div>

data(){
            return{
                paused:true,  //準備一個變數控制播放按鈕的切換
                show:false //歌單詳情是否顯示
            }
        },

?????唱片旋轉

6.唱片和歌詞的切換

預設一個顯示，一個不顯示

 data() {
            return {
                isPlaycontent: true
            }

 <div class="playContent" v-if="isPlaycontent" @click="isPlaycontent=!isPlaycontent">
            <img class="needle" :class="{active:!paused}" src="@/assets/img/needle-ip6.png" alt="">
            <img class="disc" src="@/assets/img/disc-ip6.png" alt="">
            <img class="playImg" :src="playDetail.al.picUrl" alt="">
        </div>
        <div class="playLyric" v-else @click="isPlaycontent=!isPlaycontent">
            我是歌詞模組內容
        </div>

7.找到介面文件，獲取當前音樂歌詞展示到頁面

api /index 獲取歌詞的封裝介面 ,api /liric?id=33894312 id 當前歌曲的id

export function getLyric(id) {
    return axios.get(`${baseUrl}/lyric?id=${id}`)
}
​

統一對外丟擲

export default {
    getBanner,
    getMusic,
    getPlaylistDetail,
    getLyric
}

在store/index裡面的state中準備一個當前播放歌曲的歌詞

 state: {
        playlist: [//音樂播放列表，預設有一條播放歌曲
            {
                name: "追夢赤子心",
                id: 355992,
                al: {
                    id: 35139,
                    name: "追夢痴子心",
                    pic: 19061133579343590,
                    picUrl: "http://p3.music.126.net/XDncptlBJ4_LN3hLBx-8aw==/19061133579343591.jpg",
                    pic_str: "19061133579343591",
                }
            }
        ],
        playCurrentIndex: 0, //當前播放的音樂在音樂列表中的下標
        lyric: ""
    },

mutations 中定義一個函式setLyric，用來修改歌詞資料

mutations: {
        setPlaylist(state, value) {
            state.playlist = value;
        },
        setPlayIndex(state, value) {
            state.playCurrentIndex = value;
        },
        setLyric(state, value) {
            state.lyric = value;
        }
    },

actions 獲取歌詞詳情的函式 content當前的store物件，payload傳遞引數

plyload.id當前播放歌曲的id

宣告一個變數，用來接收 result是當前歌詞的詳情

actions: {
        async resLyric(content,payload){
            let result=await api.getLyric(payload.id);
            console.log(result)
        }//請求歌曲詳情資訊
​
    }    

dispath觸發action的方法，修改非同步資料

commit觸發mutation中的方法，修改同步資料

在playController.vue裡面

 mounted() {//預設情況下，網頁一載入就觸發，view和model雙向繫結之後，觸發在store中的reqltric獲取當前播放歌曲，歌詞詳情
            this.$store.dispatch('reqLyric', {id: this.playlist[this.playCurrentIndex].id});
        },
        updated() {//播放音樂資料發生改變，重新獲取當前播放歌曲的歌詞
            this.$store.dispatch('reqLyric', {id: this.playlist[this.playCurrentIndex].id});
        },

修改歌詞內容為當前歌詞詳情

content.commit('setLyric',result.data.lrc.lyric)

把store資料拿過來，放在頁面上(在頁面上顯示歌詞)

    <div class="playLyric" v-else @click="isPlaycontent=!isPlaycontent">
            <p>{{$store.state.lyric}}</p>
        </div>