---common/js/mixin.js
import {mapGetters, mapMutations, mapActions} from 'vuex'
import {playMode} from 'common/js/config'
import {shuffle} from 'common/js/util'
export const playlistMixin = {
computed: {
...mapGetters([
'playlist'
])
},
mounted(){
this.handlePlaylist(this.playlist)
},
activated(){
this.handlePlaylist(this.playlist)
},
watch: {
playlist(newVal){
this.handlePlaylist(this.playlist)
}
},
methods: {
handlePlaylist(){
throw new Error('component must implement handlePlaylist method')
}
}
}
vue中调用mixin
<script type="text/ecmascript-6">
import {playerMixin} from 'common/js/mixin'
export default {
mixins: [playerMixin],
data(){
return{
}
},
computed: {
},
methods: {
},
watch: {
},
components: {
}
}
</script>
---@click.stop -----------阻止点击事件冒泡
---当scroll组件加载了但不能滚动时,
1.查看是否在加载了DOM后重新渲染refresh();
2.scroll组件中监听数据变化watch 延时时间延长到100ms (>20ms)
show(){
this.showFlag = true
setTimeout(()=>{
this.$refs.listContent.refresh()
this.scrollToCurrent(this.currentSong)
}, 20)
},
---transition-group
注意: 需要name tag 和 :key
<transition-group name="list" tag="ul">
<li :key="item.id" ref="listItem" ></li>
</transition-group>
&.list-enter-active, &.list-leave-active
transition: all 0.1s linear
&.list-enter, &.list-leave-to
height: 0
---个人中心中,把数组中的所有元素实例化为Song对象
random(){
let list = this.currentIndex===0? this.favoriteList: this.playHistory
if(list.length===0){
return
}
list = list.map((song)=>{
return new Song(song)
})
this.randomPlay({list})
},
...mapActions([
'insertSong',
'randomPlay'
])