<template>
<div>
<!-- 九宫格 -->
<div class="luck-item-box">
<div id="Vue">
<div class="box">
<div class="row" :class="select == index ? 'active' : ''" v-for="(item,index) in list" :key="index">
{{item.name}}</div>
<div class="draw" @click="startDraw()">抽奖</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, nextTick, onActivated } from 'vue';
let list: any = [
{
name: "手机"
},
{
name: "平板"
},
{
name: "电磁炉"
},
{
name: "洗衣机"
},
{
name: "衣柜"
},
{
name: "电脑"
},
{
name: "电视"
},
{
name: "冰箱"
},
];
let drawFlag: any = ref(true); // 是否开始抽奖
function startLuck() {
if (luckProps.luckCount > 0 && drawFlag.value) {
drawFlag.value = false; // 阻止多次点击
console.log('startLuckstartLuckstartLuckstartLuck')
}
}
let flag: any = ref(true); // 是否开始抽奖
let select: any = ref(-1);
let timer: any = ref('');
let count: any = ref(0);
let speed: any = 300;
let spin: any = 3;
function startDraw() {
let baseSpeed: any = 100;
if (flag.value == true) {
flag.value = false
timer = setInterval(() => {
spinPrize()
}, 100)
}
}
function spinPrize() {
select.value += 1
if (select.value > 7 && count.value != 3) {
select.value = 0
count.value += 1
}
if (select.value == 5 && count.value == 3) {
clearInterval(timer)
flag.value = true
count.value = 0
console.log("中奖产品为:" + list[select.value].name)
}
}
onMounted(async () => {
// init();
});
</script>
<style lang="scss" scoped>
.box {
position: relative;
width: 400px;
height: 400px;
margin: auto;
}
.draw {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: chocolate;
text-align: center;
line-height: 100px;
color: #fff;
cursor: pointer;
}
.row {
position: absolute;
width: 100px;
height: 100px;
line-height: 100px;
background: cadetblue;
color: #fff;
text-align: center;
}
.box .row:nth-child(1) {
top: 0;
left: 0;
}
.box .row:nth-child(2) {
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
.box .row:nth-child(3) {
top: 0;
right: 0;
}
.box .row:nth-child(4) {
top: 50%;
right: 0;
transform: translate(0, -50%);
}
.box .row:nth-child(5) {
bottom: 0;
right: 0;
}
.box .row:nth-child(6) {
bottom: 0;
right: 50%;
transform: translate(50%, 0);
}
.box .row:nth-child(7) {
bottom: 0;
left: 0;
}
.box .row:nth-child(8) {
top: 50%;
left: 0;
transform: translate(0, -50%);
}
.active {
background: lightseagreen !important;
}
</style>
Vue 3 九宫格抽奖代码
最新推荐文章于 2023-09-04 09:00:00 发布
这是一个使用Vue和TypeScript编写的抽奖界面组件,包含九宫格布局和点击抽奖功能。当用户点击“抽奖”按钮时,会执行startDraw函数,模拟旋转效果并决定中奖项目。样式定义了各个奖项格子的布局和选中状态。
摘要由CSDN通过智能技术生成