当前位置：首页 > VUE

vue3实现抽奖

2026-01-23 13:57:43VUE

Vue3 实现抽奖功能

抽奖功能的实现通常包括以下几个关键部分：奖品列表、抽奖动画、随机选择和中奖逻辑。以下是基于 Vue3 的实现方法。

奖品列表配置

在 Vue3 的 setup 中定义奖品列表和相关状态：

import { ref } from 'vue';

const prizes = ref([
  { id: 1, name: '一等奖', probability: 0.1 },
  { id: 2, name: '二等奖', probability: 0.2 },
  { id: 3, name: '三等奖', probability: 0.3 },
  { id: 4, name: '谢谢参与', probability: 0.4 }
]);

const currentPrize = ref(null);
const isRolling = ref(false);

抽奖动画实现

使用 CSS 动画或 JavaScript 定时器实现抽奖的滚动效果。以下是基于定时器的实现：

const rollAnimation = () => {
  let rollCount = 0;
  const maxRolls = 20; // 滚动次数
  const interval = setInterval(() => {
    rollCount++;
    const randomIndex = Math.floor(Math.random() * prizes.value.length);
    currentPrize.value = prizes.value[randomIndex];

    if (rollCount >= maxRolls) {
      clearInterval(interval);
      isRolling.value = false;
      determineWinner(); // 最终确定中奖结果
    }
  }, 100); // 每100毫秒切换一次显示
};

中奖逻辑

根据奖品的概率权重随机选择最终中奖结果：

const determineWinner = () => {
  const random = Math.random();
  let cumulativeProbability = 0;

  for (const prize of prizes.value) {
    cumulativeProbability += prize.probability;
    if (random <= cumulativeProbability) {
      currentPrize.value = prize;
      break;
    }
  }
};

触发抽奖

在模板中添加抽奖按钮并绑定事件：

<template>
  <div class="lottery-container">
    <div class="prize-display">{{ currentPrize?.name || '准备抽奖' }}</div>
    <button @click="startLottery" :disabled="isRolling">
      {{ isRolling ? '抽奖中...' : '开始抽奖' }}
    </button>
  </div>
</template>

<script setup>
const startLottery = () => {
  if (isRolling.value) return;
  isRolling.value = true;
  rollAnimation();
};
</script>

样式优化

添加基本样式增强视觉效果：

.lottery-container {
  text-align: center;
  margin-top: 50px;
}

.prize-display {
  font-size: 24px;
  margin-bottom: 20px;
  height: 30px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
}

button:disabled {
  background-color: #cccccc;
}