当前位置：首页 > VUE

vue实现翻牌抽奖

2026-01-17 13:03:18VUE

Vue实现翻牌抽奖功能

翻牌抽奖是一种常见的互动效果，可以通过Vue结合CSS动画实现。以下是具体实现方法：

数据结构设计

使用Vue的data定义奖品列表和当前选中状态：

data() {
  return {
    prizes: [
      { id: 1, name: '奖品1', flipped: false },
      { id: 2, name: '奖品2', flipped: false },
      // 更多奖品...
    ],
    isDrawing: false
  }
}

模板结构

在模板中使用v-for渲染奖品卡片：

<div class="card-container">
  <div 
    v-for="(prize, index) in prizes" 
    :key="prize.id"
    :class="['card', { 'flipped': prize.flipped }]"
    @click="flipCard(index)"
  >
    <div class="card-front">点击抽奖</div>
    <div class="card-back">{{ prize.name }}</div>
  </div>
</div>

CSS动画效果

实现翻牌的3D翻转效果：

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  width: 100px;
  height: 150px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  cursor: pointer;
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.card-front {
  background: #3498db;
  color: white;
}

.card-back {
  background: #e74c3c;
  color: white;
  transform: rotateY(180deg);
}

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

抽奖逻辑实现

添加抽奖方法处理随机选择和动画：

methods: {
  flipCard(index) {
    if (this.isDrawing) return;

    this.isDrawing = true;
    // 随机选择获奖卡片
    const winnerIndex = Math.floor(Math.random() * this.prizes.length);

    // 翻转动画
    this.prizes[winnerIndex].flipped = true;

    // 重置状态
    setTimeout(() => {
      this.prizes.forEach(p => p.flipped = false);
      this.isDrawing = false;
    }, 3000);
  }
}