使用vue实现九宫格抽奖功能
使用vue2和vue3分别实现九宫格抽奖功能
关于九宫格抽奖的功能，想必大家都见过。外圈为奖品，中间是一个抽奖的按钮，接下来就讲解怎么实现九宫格的抽奖功能。
本demo使用技术：vue2/vue3，作用域插槽，定时器，递归自调用，注册全局组件
这里我就搭建个新vue3的项目，虽然是vue3，但也完全可以使用vue2的写法实现
创建项目删除初始化代码省略…
在这里我是写死的数据。首先我们在App组件里声明list数组，用来当做奖品。这里我们在list数组里写8个项，id从0到7，text可随意写（九宫格为什么写8个，是因为另一个是按钮，并不是奖品）
list: [
{
id: 0,
text: "腾讯100元",
},
{
id: 1,
text: "腾讯50元",
},
{
id: 2,
text: "腾讯10元",
},
{
id: 3,
text: "腾讯5元",
},
{
id: 4,
text: "腾讯一元",
},
{
id: 5,
text: "腾讯100积分",
},
{
id: 6,
text: "腾讯500元",
},
{
id: 7,
text: "腾讯1毛钱",
},
],
然后我们通过父子组件的传值，把list传给子组件。子组件使用props接收。代码省略
然后写个li标签，并使用v-for把每一项循环渲染出来。
九宫格的样式可随意写懒的可以直接复制，我这里cj_box类名写在了ul标签上
完整样式：
.cj_box {
width: 800px;
height: 800px;
margin: auto;
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
li {
width: 251px;
height: 251px;
background-color: #eee;
text-align: center;
line-height: 251px;
&:nth-child(5) {
cursor: pointer;
}
}
li.active {
background-color: rgb(233, 159, 159);
}
}
注意：我们这里给了九宫格的样式后，渲染li的顺序是从上往下，从左往右。然而正常的九宫格应该是顺时针围绕在外围一圈的，因为中间的按钮。 不一样的人，也可能会有不一样的思路
在这里我们对他进行更改下标即可，在计算属性里对list数组进行map处理，然后使用switch语句就能实现
let ary = this.list.map((item, index) => {
switch (index) {
case 3:
return {
...this.list[7],
index: 7,
};
case 4:
return {
...this.list[3],
index: 3,
};
case 5:
return {
...this.list[6],
index: 6,
};
case 6:
return {
...this.list[5],
index: 5,
};
case 7:
return {
...this.list[4],
index: 4,
};
default:
return {
...item,
index: index,
};
}
});
以上代码，阅读起来可能会有点麻烦。但仔细看也并不难，只是把正常下标，改成了九宫格形式的下标。
就比如第一个case的下标是3，那就是正常情况下的第二行第一个li；把他改成九宫格形式，那就是第八个li了，下标也自然是7了，以此类推。最后的default，也就是前三个li，他们不用改变
下面我们开始增加第五个li，点击按钮（计算属性完整代码如下）
computed: {
renderList() {
let ary = this.list.map((item, index) => {
switch (index) {
case 3:
return {
...this.list[7],
index: 7,
};
case 4:
return {
...this.list[3],
index: 3,
};
case 5:
return {
...this.list[6],
index: 6,
};
case 6:
return {
...this.list[5],
index: 5,
};
case 7:
return {
...this.list[4],
index: 4,
};
default:
return {
...item,
index: index,
};
}
});
return ary
.slice(0, 4)
.concat({ id: "btn", text: "开始抽奖" })
.concat(ary.slice(4));
},
},
最下面的 return ary 就是给数组增加一个标签，赋予id和text
基本搭建完成，如图：
接下来就给中间按钮添加点击事件了，不要迷惑
这里直接在循环的li标签里，写@click就行，然后把循环的每一项当做参数，传递过去。
这里循环遍历的不是list 而是renderList函数
<li
v-for="item in renderList"
:key="item.id"
@click="fn(item)"
>
{{ item.text }}
</li>
这样就把写了个点击事件，并传递了参数
接着就在methods里写代码了
注意看代码里的注释信息
fn(item) {
// 在return ary那里 我们添加的点击li，赋予的id是btn
// 下面代码当不等于btn的时候，那就意味着不是点击按钮，直接return
if (item.id !== "btn") return;
// 然后在date里，定义一个下标赋值为null，初始值设为null是控制抽奖转动，不点击按钮的时候，就不会有显示中奖的高亮
this.activeIndex = null;
// 封装一个抽奖的函数，并在fn函数里调用 ，参数为执行的时间参数
this.move(10);
},
注意看代码里的注释信息
// 参数time，表示传入的时间数，每10毫秒执行一次
move(time) {
this.timer = setTimeout(() => {
// 这里给空下标加1，每次执行累加 1
let n = this.activeIndex + 1;
// 把获取累加下标的值，对8进行取余，那么就会在下标为8里一直循环，永远不会出现下标为9的情况
this.activeIndex = n % 8;
// 这里是递归自调用一直循环，参数的设置代表了速度逐渐变慢，但并不会停下
this.move(time + time * 0.1);
// time时间值，
}, time);
}
表面上可以进行抽奖了，现在添加一下抽奖的样式
绑定下面的class类即可，根据下标变动，
<li
v-for="item in renderList"
:key="item.id"
:class="{ active: activeIndex === item.index }"
@click="fn(item)"
>
{{ item.text }}
</li>
现在是不是就有了表面效果了
下面给个判断，让他停下来，不然会一直抽奖下去
move(time) {
if (time > 800) {
} else {
this.timer = setTimeout(() => {
let n = this.activeIndex + 1;
this.activeIndex = n % 8;
this.move(time + time * 0.1);
}, time);
}
},
添加if判断，把代码放在else里，当时间参数不大于800时就继续执行，这样就能停下来了。但有个问题是，他永远都抽中了同一个奖品
更改：
date里声明变量，
data() {
return {
activeIndex: null,
cj: 5, // 控制中奖为第五个下标
};
},
这里的控制中奖，既可以设置为随机中奖，也可以设置为只种一个奖（就很棒！）我们这里的下标为五的奖品是100积分
在上面空的if为true代码块里，再写个判断
注意代码注释
move(time) {
if (time > 800) {
// 当中奖下标不等于我设置的奖品下标时，继续执行，
if (this.activeIndex !== this.cj) {
// 定时器
this.timer = setTimeout(() => {
let n = this.activeIndex + 1;
this.activeIndex = n % 8;
// 这里时间参数要小，这样才不会看出来倪端，不然猛的停下来，一看就太假。这样就是慢慢停到你想让他中奖的那个li上
this.move(time + time * 0.05);
}, time);
} else {
// 中奖下标等于我设置的奖品下标时，中奖了
console.log("中奖了", this.cj);
}
} else {
this.timer = setTimeout(() => {
let n = this.activeIndex + 1;
this.activeIndex = n % 8;
this.move(time + time * 0.1);
}, time);
}
},
太没人性了，下面我们写随机中奖
注意代码注释
fn(item) {
if (item.id !== "btn") return;
this.activeIndex = null;
// 控制随机中奖，先清空写死的中奖下标
this.cj = null
setTimeout(()=>{
// 使用Math.random 随机数 *8 然后赋值给我们的 this.cj 即可
this.cj = Math.floor(Math.random()*8)
console.log(this.cj);
},1000)
this.move(10);
},
这样就很银杏化了!!!
下面我们把item.text，写成作用域插槽
在App的子组件标签里，写上作用域插槽
<cj :list="list">
// 这里是奖品
<template #item='itemScope'>
<p>
{{itemScope.itemDate.text}}
</p>
</template>
// 这里是按钮
<template #btn>
<p>
用户的按钮
</p>
</template>
</cj>
然后在子组件里，更改 item.text
// li标签里，先注释掉 {{ item.text }}
// {{ item.text }}
// 写上slot 把item数据传递过去，接着进行v-if判断一下，不写v-if的话九宫格就全是奖品，没有按钮了
<slot name="item" :itemDate="item" v-if="item.id!=='btn'"></slot>
<slot name="btn" v-else></slot>
作用域插槽就完成了，下面我们改成vue3的写法
VUE3 （不多做详细解释），有过了解的，一看便懂
ps：vue3不需要data，因此没有this。使用的vue3内部的方法，都需要引入。函数和变量都写在一个函数里，都需要return出去。对于ref绑定的动态值做处理时，都需要写成 变量.value。
<template>
<ul class="cj_box">
<li
v-for="item in renderList"
:key="item.id"
:class="{ active: activeIndex === item.index }"
@click="fn(item)"
>
<slot name="item" :itemDate="item" v-if="item.id !== 'btn'"></slot>
<slot name="btn" v-else></slot>
</li>
</ul>
</template>
<script>
// 注册
import { computed, ref } from "vue";
export default {
name: "cj",
props: {
list: Array,
},
// setup()，传入子组件信息
setup(props) {
// 下标
let activeIndex = ref(null);
// 默认中奖
let cj = ref(5);
// 时间值
let timer = null;
// 点击开始抽奖
let fn = function (item) {
if (item.id !== "btn") return;
activeIndex.value = null;
// 控制随机中奖
cj.value = null;
setTimeout(() => {
cj.value = Math.floor(Math.random() * 8);
console.log(cj);
}, 1000);
// 调用抽奖函数
move(10);
};
// 抽奖函数
let move = function (time) {
if (time > 800) {
// 若非随机，指定奖品
if (activeIndex.value !== cj.value) {
timer = setTimeout(() => {
let n = activeIndex.value + 1;
activeIndex.value = n % 8;
move(time + time * 0.05);
}, time);
} else {
// 中奖了
console.log("中奖了", cj);
}
} else {
// 抽奖
timer = setTimeout(() => {
let n = activeIndex.value + 1;
activeIndex.value = n % 8;
move(time + time * 0.1);
}, time);
}
};
// 更改下标，改成九宫格形式
let renderList = computed(() => {
let ary =
// 对如果为空，做处理
props.list &&
props.list.map((item, index) => {
switch (index) {
case 3:
return {
...props.list[7],
index: 7,
};
case 4:
return {
...props.list[3],
index: 3,
};
case 5:
return {
...props.list[6],
index: 6,
};
case 6:
return {
...props.list[5],
index: 5,
};
case 7:
return {
...props.list[4],
index: 4,
};
default:
return {
...item,
index: index,
};
}
});
// 添加点击按钮
return ary
.slice(0, 4)
.concat({ id: "btn", text: "开始抽奖" })
.concat(ary.slice(4));
});
return {
activeIndex,
renderList,
cj,
fn,
move,
timer,
};
},
};
</script>
<style scoped lang="less">
.cj_box {
width: 800px;
height: 800px;
margin: auto;
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
li {
width: 251px;
height: 251px;
background-color: #eee;
text-align: center;
line-height: 251px;
&:nth-child(5) {
cursor: pointer;
}
}
li.active {
background-color: rgb(233, 159, 159);
}
}
</style>
补充：
可写个独立的js文件，引入vue组件并注册，然后把js文件，在mian.js里引入。使用时，直接组件名就行，不需要引入和注册
// 独立js文件名字为 cj.js cj3.vue组件为vue3的写法
import cj3 from './cj3.vue'
export default {
install(_Vue) {
console.log(_Vue);
_Vue.component('cj', cj3)
}
}
// main文件 引入 cj.js并注册
import { createApp } from 'vue'
import App from './App.vue'
import cj from './abc/cj.js'
createApp(App).use(cj).mount('#app')
如下就是在App组件里，使用通过cj.js，全局注册的cj.vue组件。直接使用即可
结束！
加油！ Respect peace and love