vuetiger机抽奖组件（转）

最近做了tiger机组件，用到相应的效果，参考了下面的代码，已经测试可以用，非常赞

下面为所转：

最近过活动要做个tiger机效果，发现网上找的几乎都是以前的jq写的，找了一个后看了看代码，感觉写了的比较麻烦，然后自己写了一个简单的。主要是用css3来实现转动加速减速的效果。应为需要获取设置元素高度等问题，为了方便引入了jq,如果不依赖jq可吧用jq的地方改成原生js。
<template>
<div>
<div class="box">
<div class="groups animation-ease" v-for="k in 3" @webkitTransitionEnd="endGame(k)">
<ul class="group-item" v-for="i in (round+1)" >
<li class="prize-item" v-for="item in prizes">{{item}}</li>
</ul>
</div>
</div>
<div @click="startClick">{{disClick?'抽奖中...':'点击开始'}}</div>
</div>
</template>
<script>
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','');
}
}
}
</script>
<style lang="less" scoped>
.box{
width:300px;
height:100px;
overflow: hidden;
background: #fff;
.animation-ease{
transition-property:transform;
transition-duration: 3s;
transition-timing-function: ease;
}
.groups{
float: left;
width:100px;
text-align: center;
.prize-item{
width:100px;
height:100px;
font-size:50px;
}
}
}
</style>

————————————————
版权声明：本文为CSDN博主「格竹悟道」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/webjhh/article/details/80738524

标签：index,抽奖,itemHeight,id,ease,组件,disClick,vuetiger
来源： https://www.cnblogs.com/snowhite/p/16174296.html