本文实例为大家分享了关于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%"> //模糊背景图 </div> <div class="top"> <div class="back" @click="back"> <i class="icon-back"></i> </div> <h1 class="title" v-html="currentSong.name"></h1> //当前歌曲名称 <h2 class="subtitle" v-html="currentSong.singer"></h2> //当前歌手名 </div> <div class="middle"> <div class="middle-l"> <div class="cd-wrapper"> <div class="cd" :class="cdCls"> <img :src="currentSong.image" alt="" class="image"> //封面图 </div> </div> </div> </div> <div class="bottom"> <div class="progress-wrapper"> <span class="time time-l">{{ format(currentTime) }}</span> <div class="progress-bar-wrapper"> <progress-bar :percent="percent" @percentChange="onProgressBarChange"></progress-bar> </div> <span class="time time-r">{{ format(currentSong.duration) }}</span> </div> <div class="operators"> <div class="icon i-left"> <i :class="iconMode" @click="changeMode"></i> </div> <div class="icon i-left" :class="disableCls"> <i @click="prev" class="icon-prev"></i> </div> <div class="icon i-center" :class="disableCls"> <i :class="playIcon" @click="togglePlaying"></i> </div> <div class="icon i-right" :class="disableCls"> <i @click="next" class="icon-next"></i> </div> <div class="icon i-right"> <i class="icon icon-not-favorite"></i> </div> </div> </div> </div> </transition> <transition name="mini"> <div class="mini-player" v-show="!fullScreen" @click="open"> <div class="icon"> <img :src="currentSong.image" alt="" width="40" height="40" :class="cdCls"> </div> <div class="text"> <h2 class="name" v-html="currentSong.name"></h2> <p class="desc" v-html="currentSong.singer"></p> </div> <div class="control"> <i :class="miniIcon" @click.stop="togglePlaying"></i> </div> <div class="control"> <i class="icon-playlist"></i> </div> </div> </transition> <audio :src="currentSong.url" ref="audio" @canplay="ready" @error="error" @timeupdate="updateTime" @ended="end"></audio> </div>
内容版权声明:除非注明,否则皆为本站原创文章。