VUE----- mixins共享相同逻辑代码(11-8)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Miracle_Gaaral/article/details/88910924

---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>

[email protected]       -----------阻止点击事件冒泡

---当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'
])