vue 两种方式实现抽奖效果（九宫格、翻牌抽奖） -----（非TX游戏概率）

No.1 九宫格

1.1 九宫格抽奖使用的是组件lattice-lotteryhttps://h5-group.github.io/lattice-lottery/

# vue2
# 安装 sh
npm install lattice-lottery --save# 注册
import Vue from 'vue'
import LatticeLottery from 'lattice-lottery'
import 'lattice-lottery/lib/lattice-lottery.css'Vue.use(LatticeLottery)# vue3
# 安装 sh
npm install lattice-lottery-plus --save# 注册
import { createApp } from 'vue'
import App from './App.vue'import LatticeLottery from 'lattice-lottery-plus'
import 'lattice-lottery-plus/lib/lattice-lottery.css'const app = createApp(App);app.use(LatticeLottery)

1.2 使用

// html 代码<lottery-gridref="lottery1":list="list1"@onend="onend"@onsubmit="request('lottery1')"/>// data()
// 注意：list不满8个会自动补全8个，内容：谢谢参与，超过8个会截取前8个list1: [{label: "生活一角",image: require("@/assets/image/a.jpeg"),},],// methods
// 九宫格抽奖rndNum(min, max) {if (min > max) min = [max, (max = min)][0];return Math.floor(Math.random() * (max - min + 1) + min);},request(name) {// 模拟抽奖请求setTimeout(() => {const luckyIndex = this.rndNum(0, 7);  console.log(luckyIndex);this.$refs[name].go(luckyIndex);}, 100);},// 抽奖动画结束onend(data) {console.log("抽奖结果回调：", data);alert("恭喜您获得：" + data.label);},

No.2 翻牌效果

代码实现

// html<div class="overall"><div><div class="box"><divv-for="(i, index) in list":key="index"class="card-box"@click="open(i, index)"><div class="card" :class="{ active: i.activeIndex == index }"><!-- 正面 --><div class="z"><img src="@/assets/image/a.jpeg" alt /><h3>点我翻牌</h3></div><!-- 反面 内容面 --><div class="f"><span>{{ i.winner }}</span></div></div></div></div><p style="margin-top: 40px">剩余翻牌<b>{{ openNumber }}</b> 次数</p></div></div>

<script>
export default {data() {return {openNumber: 3, // 剩余翻牌次数listNum: 6, // 卡片个数winner: null, // 当前抽中的奖品list: [], // 奖品列表};},created() {this.init();},methods: {// 翻牌抽奖// 初始化奖品列表，根据listNum生成奖品列表init() {for (let i = 0; i < this.listNum; i++) {const item = {activeIndex: null, // 翻开的下标winner: null, // 获得的奖品};this.list.push(item);}},// 后端获取数据getWinner() {return new Promise((resolve) => {this.winner = "谢谢参与";resolve();});},// 翻开卡片的方法async open(row, i) {if (this.openNumber > 0) {// 判断用户没有翻开卡片if (!row.activeIndex) {await this.getWinner();this.list.forEach((item, index) => {if (i === index) {item.activeIndex = index;item.winner = this.winner;}});this.openNumber--;console.log(this.list);} else {alert("你已经翻开过了哦");}} else {alert("你的机会已经用完了哦");}},},
};
</script>

// css   lang='scss'
.box {position: relative;margin: 50px auto;width: 800px;height: 500px;display: flex;align-items: center;justify-content: center;border: 1px solid #000;
}img {width: 100%;height: 100%;
}.box div {position: absolute;left: 0;right: 0;z-index: 9999;width: 100%;height: 100%;/* 主要内容 */background: rgba(0, 0, 0, 0.5);/* 模糊大小就是靠的blur这个函数中的数值大小 */backdrop-filter: blur(10px);
}.overall {perspective: 1000px;
}
.box {display: flex;justify-content: space-around;flex-wrap: wrap;width: 95vw;max-width: 400px;.card-box {width: 28%;height: 11rem;position: relative;margin: 0.5rem;cursor: pointer;user-select: none;}.card {width: 100%;height: 100%;perspective: 500px;transform-style: preserve-3d;transition: 0.5s;position: absolute;left: 0;top: 0;&.active {transform: rotateY(180deg);}/* 正面的样式 */.z {position: absolute;width: 100%;height: 100%;z-index: 2;background: white;overflow: hidden;display: flex;justify-content: center;align-items: center;box-shadow: 0 0 0 2px #cc9793;&:hover img {transform: scale(1.5) translateX(-20%);}img {transition: 0.3s;height: 100%;position: absolute;top: 0;left: 0;}h3 {position: relative;z-index: 3;color: white;font-weight: 200;font-size: 1rem;display: inline-block;border: 1px dashed white;padding: 5px;}//   opacity: .5;}/* 反面的样式 内容部分 */.f {outline: 1px dashed #0ee7e7;outline-offset: -0.5rem;box-sizing: border-box;background: #fcfcfc;position: absolute;width: 100%;height: 100%;z-index: 2;transform-style: preserve-3d;transform: rotateY(180deg) translateZ(1px);display: flex;justify-content: center;align-items: center;font-weight: bold;}}

vue 两种方式实现抽奖效果（九宫格、翻牌抽奖） -----（非TX游戏概率）相关推荐

C#窗体加标尺的两种方式及显现效果
1.带刻度和缩放比例的标尺 public static float MonitorDPI = 96;private int originLocation = 0; //坐标原地起始位置private ...
echarts柱状图优化（柱状图渐变色实现的两种方式）
实现方式一: option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},y ...
vue编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换
编写一个登录页面,使用Tab栏实现"账号登录"和"二维码登录"这两种方式的切换,并通过transition组件结合animate.css实现切换时的动画效果 1 ...
vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
ajax加载vue数据,详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
整理文档,搜刮出一个使用vue.js结合jquery ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 demo {{message }} 测试jqu ...
Vue系列vue-router的参数传递的两种方式（五）
Vue系列vue-router的参数传递的两种方式前言一.编写Profile页面二.编写App.vue入口三.路由配置,index.js 四.对比route.params方式传参五.项目中 ...
vue 路由传参 params 与 query两种方式的区别
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
vue 在线编辑excel表格（原生和使用组件的两种方式）
vue 在线编辑excel表格(原生和使用组件的两种方式) top表头和left表头格式的表格 <template><div>& ...
Java 实现抽奖的两种方式
Java实现抽奖的两种方式方式一:随机数在哪个区间内返回区间下标方式二:随机数加入区间点集合排序返回随机数下标代码示例: ①抽奖入参类型为BigDecimal: package com.cfay ...

vue 两种方式实现抽奖效果（九宫格、翻牌抽奖） -----（非TX游戏概率）

No.1 九宫格

No.2 翻牌效果

vue 两种方式实现抽奖效果（九宫格、翻牌抽奖） -----（非TX游戏概率）相关推荐

最新文章

热门文章