vue-music关于Player播放器组件详解

本文实例为大家分享了关于Player播放器组件的具体内容，供大家参考，具体内容如下

迷你播放器：

1.播放器组件会在各个页面的情况下会打开。 首先在vuex state.js 中定义全局的播放器状态

import {playMode} from 'common/js/config.js';
const state = {
 singer:{},
 playing:false, //是否播放
 fullScreen:false, //是否全屏
 playList:[], //播放列表
 sequenceList:[], // 非顺序播放列表
 mode:playMode.sequence, // 播放模式（顺序0，循环1，随机2）
 currentIndex:-1, //当前播放索引
}
export default state 
---------------------------------------------
// config.js
export const playMode = {
 sequence:0,
 loop:1,
 random:2
}

2.进入播放器页面时获取播放列表数据，改变播放状态   在music-list列表中打开

在song-list 组件中派发事件到父组件，传入当前歌曲的信息和索引

<li @click="selectItem(song,index)" v-for="(song,index) in songs" class="item">
------------------------------
selectItem(item,index){
 this.$emit('select',item,index)
},

在music-list 组件中接受派发事件。

<song-list :rank="rank" :songs="songs" @select="selectItem"></song-list> 

3. 如果commit 多个状态在actions 里设置

import {playMode} from 'common/js/config.js'
export const selectPlay = function({commit,state},{list,index}){
 commit(types.SET_SEQUENCE_LIST, list)
 commit(types.SET_PLAYLIST, list)
 commit(types.SET_CURRENT_INDEX, index)
 commit(types.SET_FULL_SCREEN, true)
 commit(types.SET_PLAYING_STATE, true)
}

4. 在music-list 组件中 用mapActions提交 改变值

import {mapActions} from 'vuex'
methods:{
 selectItem(item,index){
  this.selectPlay({
  list:this.songs,
  index
  })
 },
 ...mapActions([
  'selectPlay'
 ])
 },

5.在palyer 中获取vuex 全局状态，赋值状态到相应位置（代码为完整代码，对照后面讲解慢慢理解）

<div class="player" v-show="playList.length>0">　　　　// 如果有列表数据则显示
  <div class="normal-player" v-show="fullScreen">　　//如果全屏
   <div class="background">
   <img :src="currentSong.image" alt="" width="100%" height="100%">　　　　//模糊背景图								 
 1/5    1 2 3 4 5 下一页 尾页