当前位置：首页 > VUE

vue 实现抽奖功能

2026-02-20 01:36:35VUE

实现抽奖功能的基本思路

在Vue中实现抽奖功能通常需要结合动画效果、随机数生成和状态管理。核心逻辑包括抽奖动画展示、奖项随机选择和中奖结果展示。

基础实现代码示例

<template>
  <div>
    <div class="prize-list">
      <div 
        v-for="(item, index) in prizes" 
        :key="index" 
        :class="{ active: activeIndex === index }"
      >
        {{ item.name }}
      </div>
    </div>
    <button @click="startLottery" :disabled="isRolling">开始抽奖</button>
    <div v-if="winner" class="result">恭喜获得: {{ winner }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      prizes: [
        { name: '一等奖', id: 1 },
        { name: '二等奖', id: 2 },
        { name: '三等奖', id: 3 },
        { name: '四等奖', id: 4 },
        { name: '五等奖', id: 5 },
      ],
      activeIndex: 0,
      isRolling: false,
      winner: null,
      rollSpeed: 100,
      rollTimer: null
    }
  },
  methods: {
    startLottery() {
      if (this.isRolling) return
      this.isRolling = true
      this.winner = null

      // 初始滚动效果
      this.rollTimer = setInterval(() => {
        this.activeIndex = (this.activeIndex + 1) % this.prizes.length
      }, this.rollSpeed)

      // 随机决定停止时间
      setTimeout(() => {
        this.stopLottery()
      }, 2000 + Math.random() * 2000)
    },
    stopLottery() {
      clearInterval(this.rollTimer)
      this.isRolling = false
      const randomIndex = Math.floor(Math.random() * this.prizes.length)
      this.winner = this.prizes[randomIndex].name
    }
  }
}
</script>

<style>
.prize-list {
  display: flex;
  margin-bottom: 20px;
}
.prize-list div {
  padding: 10px 20px;
  margin: 0 5px;
  border: 1px solid #ddd;
}
.prize-list .active {
  background-color: #ffeb3b;
  font-weight: bold;
}
button {
  padding: 10px 20px;
  background: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}
button:disabled {
  background: #cccccc;
}
.result {
  margin-top: 20px;
  font-size: 18px;
  color: #f44336;
}
</style>

进阶优化方案

增加动画效果 使用CSS transition或Vue的transition组件实现更流畅的动画效果。可以考虑使用第三方动画库如Animate.css。

vue 实现抽奖功能

概率控制 为不同奖项设置不同的中奖概率：

vue 实现抽奖功能

getRandomPrize() {
  const random = Math.random()
  let sum = 0
  for (const prize of this.prizes) {
    sum += prize.probability
    if (random <= sum) {
      return prize
    }
  }
  return this.prizes[0]
}

九宫格抽奖 实现九宫格形式的抽奖，需要更复杂的路径计算和动画控制：

<div class="grid-container">
  <div 
    v-for="(item, index) in 9" 
    :key="index" 
    :class="{ active: currentCell === index }"
    @click="selectCell(index)"
  >
    {{ prizes[index]?.name || '' }}
  </div>
</div>

服务器端验证 重要抽奖活动应将中奖逻辑放在服务器端，避免客户端被篡改：

async fetchLotteryResult() {
  try {
    const res = await axios.post('/api/lottery')
    this.winner = res.data.prize
  } catch (error) {
    console.error(error)
  }
}