二话不说贴代码 反正我写的很简单!!! 在子组件里
<template>
<div class="main_container box">
<div class="turntable_box">
<ul id="rotary_table">
<li
v-for="(item, index) in dataNum"
:key="index"
:class="['award' + index, { active: index == current }]"
class="award"
>
<p>{{ item.name }}</p>
<!-- <img :src="require(`@/assets/images/nineSquaredPaper/${item.name}.png`)" alt /> -->
<div class="mask" v-if="index == current"></div>
</li>
<div id="start-btn" @click="start">抽奖 冲!!</div>
</ul>
</div>
</div>
</template>
<script>
export default {
// speed: 200, 时间->速度
props:{dataNum:Array,speed:Number,
},
data() {
return {
doSpeed:this.speed,
current: 0, // 当前索引值
// speed: 200, // 时间->速度
diff: 10, // 基数
award: {}, // 抽中的奖品
time: 0, // 当前时间戳
timer: null, // 定时器
};
},
methods: {
// 开始抽奖
start() {this.doSpeed=this.speed;//再次点击速度重置
// 开始抽奖
this.getLottery()
this.time = Date.now();
// this.doSpeed = 200;
this.diff = 12;
},
// 调接口获取奖品a
getLottery() {
let num=Math.round(Math.random()*(this.dataNum.length-1)+1);
this.award.name =this.dataNum[num-1].name;
this.award.id = num;
console.log(this.award)
this.move();
},
// 开始转动
move() {
this.timer = setTimeout(() => {
this.current++;
if (this.current > this.dataNum.length-1) {
this.current = 0;
}
// 若抽中的奖品id存在,则开始减速转动
if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
this.doSpeed += this.diff; // 转动减速
// 若转动时间超过4秒,并且奖品id等于小格子的奖品id,则停下来
if (
(Date.now() - this.time) / 1000 > 4 &&
this.award.id == this.dataNum[this.current].id
) {
clearTimeout(this.timer);
setTimeout(() => {
// 将中奖的产品传递回给父组件
this.$emit('fatherEvent',this.award)
}, 0);
return;
}
} else {
// 若抽中的奖品不存在,则加速转动
this.doSpeed -= this.diff;
}
this.move();
}, this.doSpeed);
},
},
};
</script>
<style scoped lang='scss'>
.box {
background-color: rgb(211, 163, 101);
width: 600px;
height: 700px;
}
$white: #f4f4f4;
.main_container {
width: 100%;
min-height: 100%;
// background-color: #fb6010;
background-size: 100% auto;
background-repeat: no-repeat;
font-size: 26px;
// 作用: 禁用弹窗里的滑动影响页面滑动
&.prohibit {
width: 100%;
height: 100%;
overflow: hidden;
}
// 设置占位符字体颜色
input::-webkit-input-placeholder {
color: #a4a5a6;
font-size: 26px;
}
padding: 100px 0px;
.turntable_box {
margin: 0 auto;
padding-top: 160px;
width: 90%;
height: 850px;
#rotary_table {
width: 621px;
height: 621px;
position: relative;
margin: 20px auto;
background-color: brown;
.award {
width: 179px;
height: 179px;
text-align: center;
float: left;
position: absolute;
overflow: hidden;
p {
height: 179px;
line-height: 179px;
}
img {
position: absolute;
width: 179px;
top: 0;
left: 0;
height: 179px;
}
&.active {
.mask {
width: 179px;
height: 179px;
top: 0;
position: absolute;
border-radius: 10px;
background-color: #fff0bd;
opacity: 0.6;
}
}
&.award0 {
top: 21px;
left: 21px;
}
&.award1 {
top: 21px;
left: 221px;
}
&.award2 {
top: 21px;
right: 21px;
}
&.award3 {
top: 221px;
right: 22px;
}
&.award4 {
bottom: 22.5px;
right: 22px;
}
&.award5 {
bottom: 22.5px;
right: 221px;
}
&.award6 {
bottom: 22.5px;
left: 21px;
}
&.award7 {
top: 221px;
left: 21px;
}
}
#start-btn {
position: absolute;
width: 179px;
height: 179px;
top: 221px;
left: 221px;
line-height: 179px;
border-radius: 50%;
text-align: center;
color: white;
background-color: rgb(182, 112, 7);
}
}
}
}
</style>
在父组件引入时
<template>
<div>
<sudoku ref="child" :dataNum="dataNum" :speed='speed' @fatherEvent='fatherEvent' />
</div>
</template>
<script>
import sudoku from './sudoku.vue'
export default {
components:{
sudoku,
box
},
data(){
return{
dataNum: [
{
name: "会员卡",
id: 1,
},
{
name: "水瓶",
id: 2,
},
{
name: "水杯",
id: 3,
},
{
name: "地铁",
id: 4,
},
{
name: "大树",
id: 5,
},
{
name: "轮椅",
id: 6,
},
{
name: "分支",
id: 7,
},
{
name: "流花",
id: 8,
},
],
speed:200,
award:''
}
},
methods:{
fatherEvent:function(data){
window.alert('恭喜你获得了'+data.name)
console.log('fatherEvent',data)
}
}
}
</script>