建立playlist.vue 組件，在player.vue 組件中引用，點擊迷你播放器的播放列表按鈕由下至上彈出這個層，所以在player.vue 播放器組件中引用

在playlist.vue 組件中首先設置對外的方法可以控制該組件的顯示隱藏，通過mapGetters 獲取歌單數據

播放列表功能操作：

　　當前播放歌曲顯示正確的icon

　　點擊當前歌曲播放該歌曲，對應相應的icon ，列表滾動到最上面

　　刪除當前單條播放歌曲，（判斷當前歌曲是否為正在播放的歌曲，重置數組）

　　清空整個播放列表（清空時confirm 做攔截提示）

　　切換播放模式（邏輯與player組件 共享）

　　收藏該歌曲（待續）

　　添加歌曲到隊列（待續）

// actions.js

export const deleteSong = function({commit,state},song){
  let playlist = state.playList.slice();
  let sequenceList = state.sequenceList.slice();
  let currentIndex = state.currentIndex;
  let pIndex = findIndex(playlist,song);
  playlist.splice(pIndex,1);
  let sIndex 
 
= findIndex(sequenceList,song);
  sequenceList.splice(sIndex,1);

  if(currentIndex > pIndex || currentIndex == playlist.length){
    currentIndex--;
  }

  commit(types.SET_PLAYLIST,playlist)
  commit(types.SET_SEQUENCE_LIST,sequenceList)
  commit(types.SET_CURRENT_INDEX,currentIndex)

  // 如果刪除列表為空
 

  if(!playlist.length){
    commit(types.SET_PLAYING_STATE,false)
  }else{
    commit(types.SET_PLAYING_STATE,true)
  }

}

export const deleteSongList = function({commit}){
  commit(types.SET_PLAYLIST,[])
  commit(types.SET_SEQUENCE_LIST,[])
  commit(types.SET_CURRENT_INDEX,-1)
  commit(types.SET_PLAYING_STATE,false)
}

vue-music 關於playlist （底部播放列表組件）