当前位置：首页 > VUE

vue实现翻牌抽奖活动

2026-02-25 03:38:23VUE

Vue 实现翻牌抽奖活动

核心思路

翻牌抽奖活动的核心是通过 Vue 的响应式数据和动画效果，模拟卡牌翻转并展示抽奖结果。主要技术点包括：

使用 transition 或第三方动画库（如 animate.css）实现翻转动画
通过 v-for 渲染卡牌列表
利用 v-bind:class 动态控制卡牌正反面样式
抽奖逻辑通过随机数或后端接口实现

基础实现代码

<template>
  <div class="card-container">
    <div 
      v-for="(card, index) in cards" 
      :key="index"
      class="card"
      :class="{ 'is-flipped': card.isFlipped }"
      @click="flipCard(index)"
    >
      <div class="card-face card-front">点击抽奖</div>
      <div class="card-face card-back">{{ card.prize }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        { isFlipped: false, prize: '奖品1' },
        { isFlipped: false, prize: '奖品2' },
        { isFlipped: false, prize: '谢谢参与' }
      ],
      isDrawing: false
    }
  },
  methods: {
    flipCard(index) {
      if (this.isDrawing) return;
      this.isDrawing = true;

      // 模拟抽奖延迟
      setTimeout(() => {
        this.cards[index].isFlipped = true;
        this.isDrawing = false;
      }, 1000);
    }
  }
}
</script>

<style>
.card-container {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.card {
  width: 100px;
  height: 150px;
  position: relative;
  perspective: 1000px;
  cursor: pointer;
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: transform 0.6s;
}

.card-front {
  background: #f0f0f0;
  transform: rotateY(0deg);
}

.card-back {
  background: #42b983;
  transform: rotateY(180deg);
}

.is-flipped .card-front {
  transform: rotateY(-180deg);
}

.is-flipped .card-back {
  transform: rotateY(0deg);
}
</style>

进阶优化方向

动画效果增强

引入 animate.css 添加更丰富的动画
```
import 'animate.css'
```

修改模板使用入场动画

<div class="card animate__animated animate__flipInY">

抽奖逻辑完善

添加奖品权重计算


const prizes = [
{ name: '一等奖', weight: 1 },
{ name: '二等奖', weight: 3 },
{ name: '谢谢参与', weight: 6 }
];

function getRandomPrize() { const totalWeight = prizes.reduce((sum, p) => sum + p.weight, 0); let random = Math.random() * totalWeight; for (const prize of prizes) { if (random < prize.weight) return prize.name; random -= prize.weight; } }


防止重复抽奖
```javascript
flipCard(index) {
  if (this.isDrawing || this.cards[index].isFlipped) return;
  // ...
}

完整项目结构建议

/src
  /components
    LotteryCard.vue       # 单个卡牌组件
    LotteryControl.vue    # 抽奖控制按钮
  /assets
    card-back.png         # 卡牌背面图
    card-front.png        # 卡牌正面图
  /utils
    lottery.js            # 抽奖算法