[ti:aLIEz] [ar:SawanoHiroyuki[nZk]:mizuki] [al:o1] [ly:澤野弘之] [mu:澤野弘之] [ma:] [pu:] [by:ttpod] [total:268512] [offset:0] [00:00.000]<195>aLIEz <199>- <451>SawanoHiroyuki[nZk]:mizuki [x-trans]彻头彻尾的谎言 - SawanoHiroyuki[nZk]:mizuki [00:01.095]<201>作<250>詞<200>：<201>澤<200>野<199>弘<300>之 [x-trans] [00:02.846]<200>作<150>曲<150>：<200>澤<200>野<351>弘<349>之 [x-trans] [00:20.828]<200>決<250>め<200>つ<201>け<149>ば<201>か<349>り [x-trans]一直独断专权 [00:23.279]<200>自<200>惚<200>れ<200>を<200>着<400>た [x-trans]总是自负逞强 [00:24.979]<200>チ<200>ー<200>プ<450>な<550>hokori<350>で [x-trans]明明只是一文不值的骄傲 ...... refactoringLyrics(lyric){ let text = lyric.split('[offset:0]')[1]; let textArr = text.split('\n'); let lyricsArr = [], translate = []; textArr.forEach((item, index) => { let time = 0, text = ''; if (item.indexOf('[x-trans]') > -1) { translate.push(item.split('[x-trans]')[1]) } else if (item.trim() != '') { time = item.slice(1, 6).split(':'); time = parseInt(time[0]) * 60 + parseInt(time[1]); text = item.slice(11); let arr = text.split('>'); let str = arr.reduce((a, b) => { return a.split('<')[0] + b.split('<')[0] }); let obj = { time: time, text: str }; lyricsArr.push(obj); } }); for (let i in translate) { lyricsArr[i].text = lyricsArr[i].text + '\n' + translate[i]; } this.currentLyrics = lyricsArr; },
搜索栏实现
同文件下子组件挂载
为了遵循模块化开发，决定将搜索栏写成一个子组件。在同一页面下写子组件，子组件挂载到对应的template就有讲究了。此template不能被父组件的挂载元素包含，否则父组件渲染时会因为无法渲染子组件中的数据而报undefined。
<div> ... </div> <template> ... </template> var searchBox = { template: '#search-box', props: { isShow: Boolean, openFun: Function }, data(){ return { resultList: [], searchValue: '', } }, methods: { } }; new Vue({ el: '#app', components: { 'com-tip': tip, 'search-box': searchBox }, ... })
eventBus解决数据传输
通过jsonp去请求数据，需要设置一个callback函数，此callback写成一个全局函数，如果不这样写，而是通过 searchBox.methods.callback的形式，this指向将为methods。而无法直接给searchBox的data赋值。 于是通过eventBus来处理，这样更易维护。
var EventBus = new Vue(); var callBack = function(result) { console.log(result); EventBus.$emit('callBack', result); }; ... mounted(){ let self = this; EventBus.$on('callBack', function(res) { if (res && res.data) { self.resultList = res.data.songs; } }) } ...
localStrong储存歌曲信息
下次再打开，应该播放列表应该保留上一次的数据，这个可直接用localstrong实现
踩了坑
prop传递数据
使用cdn，vue的prop只支持中线格式，驼峰格式不生效
ps: 在用webpack打包的项目中用驼峰是可以，在打包过程中，会做处理。
// 正确写法 <search-box :is-show="showSearch" :open-fun="openSearch" @push-song="pushNewSong" @play-song="playSong"></search-box> // 错误写法 <search-box :isShow="showSearch" :openFun="openSearch" @pushSong="pushNewSong" @playSong="playSong"></search-box>
待优化
手动修改进度，偶尔会不生效。
搜索暂不支持分页
不支持建歌单
背景颜色与进度条颜色相近需修改进度条颜色
不支持播放模式选择-单曲循环-随机播放