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 代码
      


// 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
    
      
        
          
            
              
              
                
                点我翻牌
              
              
              
                {{ i.winner }}
              
            
          
        
        

          剩余翻牌
          {{ openNumber }} 次数
        
      
    

// 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;
    }
  }