九宫格封装好的组件 样式可以自由改哦
二话不说贴代码 反正我写的很简单！！！ 在子组件里
<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>
