![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue-music
望天一方
这个作者很懒,什么都没留下…
展开
-
vue-music(8) list组件和list组件中的快速入口bar的联动
list组件整体式一个大Scroll组件,点击每个歌手,进入歌手页面,此处用到的是二级路由二级路由<li @click="selectItem(item)" v-for="item in group.items" :key="item.id" class="list-group-item">添加点击事件selectItem (item) { ...原创 2018-09-04 20:29:10 · 267 阅读 · 0 评论 -
vue-music(11) 不同浏览器前缀函数的封装
因为有不同浏览器,所以许多属性要做跨浏览器使用,故而要加私有前缀。此处封装一个函数,进行统一设置let elementStyles = doument.createElement('div').style // 创建一个div并获得其stylelet vendor = (() =&gt; { // 立即执行函数 let transformName = { web...原创 2018-09-05 16:01:53 · 138 阅读 · 0 评论 -
vue-music (12) 播放内核
最重要的就是这个播放器播放页面 从整体来看,点击list列表的歌曲会储存到vuex中,然后进入play页面,首先给进入来一个动画1.手写动画的模板<transition name="normal" @enter="enter" @after-enter="afterEnter" @leave="leave" @after-leave="afterLeave">这是原创 2018-09-05 22:10:32 · 427 阅读 · 0 评论 -
vue-music (5) scroll组件的封装
在项目中经常用的组件<template> <div ref="scroll-wrapper"> // Betterscroll 只对于第一个组件有效,所以要交一个父容器包裹 <slot> </solt> // 插槽 </div></template><script原创 2018-09-03 20:26:39 · 183 阅读 · 0 评论 -
vue-music (6) 图片懒加载的使用
npm install vue-lazyload --save 在main.js 中引用import lazyLoad from 'vue-lazyload'Vue.use(lazyLoad, { loading: require('图片路径如 common/image/default.png')})使用:<img v-lazy="图片路径">&l...原创 2018-09-03 21:19:54 · 103 阅读 · 0 评论 -
vue-music (7) 对歌手信息的再整理
从QQ音乐返回的数据不是我们想要的,所以要对res.data.list进行在加工,以便于dom操作_getSingerList () { getSingerList().then((res) => { if (res.code === ERR_OK) { this.singer = res.data // 得到的 数据不是object类型 ...原创 2018-09-03 22:18:15 · 252 阅读 · 0 评论 -
vue-music(13)进度条的实现
<template> <!-- 进度条 总体长度 --> <div class="progress-bar" ref="progressBar" @click="progressClick"> <div class="bar-inner"> <!-- 进度条 已播放长原创 2018-09-06 19:18:23 · 1301 阅读 · 0 评论 -
vue-music(14) 随机播放的设置
改变播放模式: 到这里就实现点击切换图标了。因为原来就有一个播放列表(顺序播放列表),只是在此列表基础上进行随机播放,所以创建一个新list,用shuffle函数打乱顺序播放列表并返回一个新的随机列表, 记住要重新提交到mutations中改变store里面的playList的方法。let list = null if (mode === playMode....原创 2018-09-06 19:32:11 · 838 阅读 · 0 评论 -
vue-music(15)歌词的处理
歌词被referer()保护,所以要景后端反向代理取得数据。 得到的数据是格式不正确,不是一般的json格式,所以经过正则变换一下 var ret = response.data // 歌词数据 if (typeof ret === 'string') { var reg = /^\w+\(({[^()]+})\)$/ ...原创 2018-09-06 19:52:23 · 1628 阅读 · 0 评论 -
vue-music (4) 对有refrere和host保护的数据的抓取
利用axios方法 axios axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF1.axios...原创 2018-09-02 22:49:24 · 337 阅读 · 0 评论 -
vue-music (3) 轮播图
抽象出一个轮播图组件slider&amp;lt;div class=&quot;slider&quot; ref=&quot;slider&quot;&amp;gt; &amp;lt;div class=&quot;slider-group&quot; ref=&quot;sliderGroup&quot;&a原创 2018-09-02 20:49:33 · 261 阅读 · 0 评论 -
vue-music (2) jsonp 及jsonp第三方插件的使用
jsonp 发送的不是ajax,而是script标签,因为script不受同源策略影响,里面的src指向服务端地址,地址后跟着一个参数:callback 前端在发送请求之前在windows注册一个jsonp1事件,请求的数据包裹在jsonp1中,在调用jsonp1的数据渲染dom等。使用第三方插件: jsonpimport OrignJsonp from 'jsonp'expor...原创 2018-09-02 17:07:12 · 748 阅读 · 0 评论 -
vue-music (9) vuex 的初始化及应用注意事项
每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。2. 你不能直接改变 store 中的状态。改变 st...原创 2018-09-04 21:06:02 · 363 阅读 · 0 评论 -
vue-music(17)搜索历史的保存
state创建一个数组存放:searchHistory: []然后是mutation和typesexport const SET_SEARCH_HISTORY = 'SET_SEARCH_HISTORY' [types.SET_SEARCH_HISTORY] (state, history) { // history接收一个数组 state.searchHis...原创 2018-09-07 19:43:37 · 323 阅读 · 0 评论 -
vue-music(17)删除一条历史记录和全部记录
这里的删除需要改变两部分 1:state里的数据 2:localStorage的数据所以还需要在cache里面封装方法// 下面是deleteSearchOne的实现export function deleteSearch (query) { let searches = storage.get(SEARCH_KEY, []) // 上面查看当前存储空间的情况,如果没...转载 2018-09-07 20:08:27 · 2758 阅读 · 0 评论 -
vue-music(18)取消和确定弹窗蒙层的设置
首先,要写一个弹窗的confirm组件:<template> <transition name="confirm-fade"> <div class="confirm"> <div class="confirm-wrapper"> <div class="confir原创 2018-09-07 20:17:36 · 691 阅读 · 0 评论 -
vue-music(19)mixin的使用及di底部scroll刷新的实现
当多个组件都用到共同的一些js代码时候,可以吧这些代码抽象出来,放在mixin中,用到的时候引用export const playlistMixin = { computed: { ...mapGetters([ 'playList' ]) }, mounted () { // 渲染完毕后触发 this.handlePlayList(this...原创 2018-09-07 20:26:25 · 146 阅读 · 0 评论 -
vue-music(20)点击播放及当前博凡歌曲在列表中的显示的实现
给当前播放的歌曲添加一个class<i class="current" :class="getActivatyCls(item)"></i>getActivatyCls (item) { if (this.currentSong.id === item.id) { // 当前播放是选中的歌曲 return 'icon-play' //...原创 2018-09-07 20:36:39 · 892 阅读 · 0 评论 -
vue-music(21)在播放控件中删除一首和全部删除
通过actions去改变歌曲的currentIndex,playlist和sequencelistexport const deleteSong = function ({commit, state}, song) { let playList = state.playList.slice() // 创建数组副本,而不用改动原数组 let sequenceList = state....原创 2018-09-07 20:42:32 · 509 阅读 · 0 评论 -
vue-music(10)music-list组件
<template> <div class="music-list"> <div class="back" @click="back"> <i class="icon-back"></i> </div> <h1原创 2018-09-04 23:02:46 · 554 阅读 · 0 评论 -
vur-music(16)search组件
searc页面有一个搜索框search-box&lt;template&gt; &lt;div class="search-box"&gt; &lt;i class="icon-search"&gt;&lt;/i&gt; &lt;input type=&quo原创 2018-09-06 22:44:59 · 280 阅读 · 0 评论