vueコンポーネントトラ抽選

最近活动したことがあってトラの机の効果をして、ネット上で探したのはほとんど以前のjqが书いたので、1つ探してコードを见て、书いたのが面倒だと感じて、それから自分で1つの简単なことを书きました.主にcss 3で回転加速減速の効果を実現する.設定要素の高さを取得する必要があるなどの問題でjqを容易に導入するためにjqに依存しなければjqの場所を原生jsに変更することができる.

import $ from 'jquery'
export default {
	data(){
		return {
			round:6,//        
			prizes:[1,2,3,4,5,6,7,8,9,11,12,13,14,15],
			disClick:false,//      
			itemHeight:0,//       
            prize_id:'',//  id
		}
	},
	mounted(){
		this.itemHeight = $('.prize-item').outerHeight()
		$('.groups').css('height',this.itemHeight * this.prizes.length*(this.round+1))
	},
	methods:{
		startClick(){//    
			if(this.disClick){
				return
            }
			//     id
			let index = parseInt(Math.random()*this.prizes.length);
			this.prizd_id = this.prizes[index];
			this.runGame(index)
		},
		runGame(index){//    
			this.disClick = true;
			this.resetGame();
			var itemHeight = this.itemHeight;
			var groupsHeight = this.round*$('.group-item').height();
			$('.groups').each(function(e){
				var pos = index*itemHeight + groupsHeight
				setTimeout(()=>{
					$(this).addClass('animation-ease').css('transform','translate3d(0, -'+pos+'px, 0)')
				},e*300)
			})
		},
        endGame(k){//        
            if(k==3){
                alert('     '+this.prizd_id)
                this.disClick = false;
            }
		},
		resetGame(){//    
			$('.groups').removeClass('animation-ease').css('transform','');
		}
	}
}