建立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 (底部播放列表组件)的更多相关文章

  1. Vue 如何实现一个底部导航栏组件

    参考网址: https://www.jianshu.com/p/088936b7b1bd/ Vue 如何实现一个底部导航栏组件 可以看到父组件是知道我点击了底部TabBar的哪个item的. 实现 实 ...

  2. Vue学习(2)---v-指令和组件

    Vue中的指令 Vue中以带有前缀V-的属性被称为指令(带有v表示他们是Vue提供的特殊attribute) 一个v-bind的例子 <div id="app" v-bind ...

  3. vue.js入门(3)——组件通信

    5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的 ...

  4. Vue.use自定义自己的全局组件

    通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main.js里面引入,第三步Vue.use这个组件.今天我简单的也来use一个自己的组件. 这里我用的webpack-sim ...

  5. vue.js基础知识篇(6):组件详解

    第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...

  6. Vue深度学习(6)- 组件

    使用组件 在Vue中,可以用 Vue.extend() 创建一个组件构造器: var MyComponent = Vue.extend({ template:'..........' //选项 }) ...

  7. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  8. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  9. Vue一个案例引发的递归组件的使用

    今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的<Vue一个案例引发的动态组件与全局事件绑定总结> 之后,今天来聊一聊我们如何在项 ...

随机推荐

  1. 自定义函数,根据p个数,自适应剧中效果

    //最后投保进程line-height 自适应居中; function self_adaption(){ $('.last_place').each(function(){ var _this = $ ...

  2. Getting Private/Public IP address of EC2 instance using AWS-cli [closed]

    For private IP address: aws ec2 describe-instances --instance-ids i-b78a096f | grep PrivateIpAddress ...

  3. jQuery Lightbox效果插件Boxer

    演示:http://www.jq22.com/yanshi1139 下载:链接: https://pan.baidu.com/s/1o8zaV2q 密码: 2ccy Boxer 是一款基于 jQuer ...

  4. Android SearchView设置与用法的那点事儿

    // 设置该SearchView默认是否自动缩小为图标 mSearchView.setIconifiedByDefault(false); // 为该SearchView组件设置事件监听器 mSear ...

  5. 【Android】Android之Copy and Paste

    Android为复制粘贴提供了一个强大的基于剪切板的框架,它支持简单和复杂的数据类型,包括纯文本,复杂的数据结构,二进制流,甚至app资源文件.简单的文本数据直接存储在剪切板中,而复杂的数据则存储的是 ...

  6. emoji表情处理研究

    http://blog.csdn.net/qdkfriend/article/details/7576524

  7. mysql 字段为NULL的一些操作

    1. 修改字段为NULL update tableName set column1 = null where id = 1 2. 字段是否为NULL (1)字段为空 select * tableNam ...

  8. setTimeout()和setInterval()方法的区别

    setTimeout(); //5秒后执行yourFunction(),只执行一次 setInterval(); //每隔5秒执行一次 1.setTimeout(funhander,time)的作用是 ...

  9. 【Python学习笔记】Coursera课程《Using Databases with Python》 密歇根大学 Charles Severance——Week4 Many-to-Many Relationships in SQL课堂笔记

    Coursera课程<Using Databases with Python> 密歇根大学 Week4 Many-to-Many Relationships in SQL 15.8 Man ...

  10. 一种面向云服务的UCON多义务访问控制方法及系统

    )设置每一云服务的义务项:建立每一云服务所包含的义务图:2)根据用户所请求的云服务查找该云服务的所有强制义务图和可选义务图,并提取该用户对该云服务的历史完成情况:3)对每一强制义务图,监控其每一义务项 ...