摘要: 定义在项目的基础组类别的 tab组件中,定义一个tab切换数量的数组 和一个currentIndex 当前高亮索引 的props,当前高亮(active)的类等于currentIndex index 当前循环的索引值,增加点击派发事件传入index 索引参数, 调用组件的页面接受派发事件点击的ind 阅读全文
posted @ 2017-12-05 10:34 ankle 阅读(401) 评论(0) 推荐(0) 编辑
摘要: 建立playlist.vue 组件,在player.vue 组件中引用,点击迷你播放器的播放列表按钮由下至上弹出这个层,所以在player.vue 播放器组件中引用 在playlist.vue 组件中首先设置对外的方法可以控制该组件的显示隐藏,通过mapGetters 获取歌单数据 播放列表功能操作 阅读全文
posted @ 2017-12-01 18:01 ankle 阅读(1033) 评论(0) 推荐(0) 编辑
摘要: 搜索历史展示每一次搜索过,并选中的关键字,保存数据到数组。搜索历史数据是需要在多个组件中共享的,所以保存在vuex 中 searchHistory 数组中,保存触发在搜索列表点击选中之后派发事件到search.vue 中,search.vue 监听事件并提交actions改变共享数组,改变vuex 阅读全文
posted @ 2017-11-30 18:35 ankle 阅读(3348) 评论(0) 推荐(0) 编辑
摘要: 搜索结果 列表点击跳转到相应的歌手详情页或者 歌曲页面,通过子路由跳转,和singer 组件一样 在suggest.vue 组件判断如果点击的是歌手,则new 一个歌手对象,通过这个对象的id 属性值传递给路由的参数,通过vuex 传递歌手数据 歌曲点击的逻辑和之前选择歌手点击列表逻辑不同,之前是改 阅读全文
posted @ 2017-11-29 21:29 ankle 阅读(1603) 评论(0) 推荐(0) 编辑
摘要: 建立搜索框组件页面,searchBox,组件接受一个可以自定义传入的placeholder 属性。input v-model 双向绑定数据关联到query 中, 在created中监听 query 变量将改变的新值派发给外部父组件,在search.vue 组件中将其引入 search.vue 热门搜 阅读全文
posted @ 2017-11-29 17:01 ankle 阅读(1897) 评论(0) 推荐(0) 编辑
摘要: 播放器播放模式有三种,顺序播放,单曲循环,随机播放,定义在vuex 中的字段为 mode。点击切换播放模式的图标。切换模式判断是否为随机播放,如果是随机播放模式,则取得sequenceList 列表数组 。 首先分清楚 sequenceList 是歌单顺序列表,显示在界面上的,playlist 是根 阅读全文
posted @ 2017-11-28 16:27 ankle 阅读(3048) 评论(0) 推荐(0) 编辑
摘要: 迷你播放器 1.播放器组件会在各个页面的情况下会打开。 首先在vuex state.js 中定义全局的播放器状态 2.进入播放器页面时获取播放列表数据,改变播放状态 在music-list列表中打开 在song-list 组件中派发事件到父组件,传入当前歌曲的信息和索引 在music-list 组件 阅读全文
posted @ 2017-11-28 11:47 ankle 阅读(7381) 评论(1) 推荐(0) 编辑
摘要: 简单理解 在store中包含组件中的共享状态state和改变状态的方法(暂且称作方法)mutations 使用store.commit方法触发mutations改变state: mapState函数 还有更简单的使用方法: Getters对象 如果我们需要对state对象进行做处理计算,如下: 如果 阅读全文
posted @ 2017-11-24 14:42 ankle 阅读(277) 评论(0) 推荐(0) 编辑
摘要: 1.三种声明方式 2. 变量的解构赋值 简单的理解就是将等号右边数组或者对象 的元素拆开赋值给相应的变量 数组解构 数组作为参数传给函数 对象解构 数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值 3.字符串查找 之前用str.index 阅读全文
posted @ 2017-11-22 15:57 ankle 阅读(365) 评论(0) 推荐(0) 编辑
摘要: JavaScript代码武器工具 https://segmentfault.com/a/1190000011966867 阅读全文
posted @ 2017-11-16 17:55 ankle 阅读(174) 评论(0) 推荐(0) 编辑