当前位置：首页 > VUE

vue3实现抽奖

2026-02-24 04:34:30VUE

Vue3 实现抽奖功能

基本思路

抽奖功能通常包含以下几个核心部分：奖品列表、抽奖动画、随机选择和中奖结果展示。Vue3的响应式特性和Composition API可以很好地实现这些功能。

核心代码实现

1. 奖品列表与状态管理

import { ref } from 'vue';

const prizes = ref([
  { id: 1, name: '一等奖', probability: 0.1 },
  { id: 2, name: '二等奖', probability: 0.3 },
  { id: 3, name: '三等奖', probability: 0.6 }
]);

const isDrawing = ref(false);
const result = ref(null);

2. 抽奖逻辑实现

vue3实现抽奖

const drawLottery = () => {
  if (isDrawing.value) return;

  isDrawing.value = true;
  result.value = null;

  // 模拟抽奖动画
  const animationDuration = 3000;
  const startTime = Date.now();

  const animate = () => {
    const elapsed = Date.now() - startTime;
    const progress = elapsed / animationDuration;

    if (progress < 1) {
      // 随机显示奖品产生动画效果
      const randomIndex = Math.floor(Math.random() * prizes.value.length);
      result.value = prizes.value[randomIndex].name;
      requestAnimationFrame(animate);
    } else {
      // 最终结果
      isDrawing.value = false;
      const finalResult = getFinalResult();
      result.value = finalResult.name;
    }
  };

  animate();
};

const getFinalResult = () => {
  const random = Math.random();
  let sum = 0;

  for (const prize of prizes.value) {
    sum += prize.probability;
    if (random <= sum) {
      return prize;
    }
  }

  return prizes.value[prizes.value.length - 1];
};

3. 模板部分

<template>
  <div class="lottery-container">
    <h2>抽奖活动</h2>

    <div class="prize-list">
      <div v-for="prize in prizes" :key="prize.id" class="prize-item">
        {{ prize.name }} ({{ prize.probability * 100 }}%)
      </div>
    </div>

    <button @click="drawLottery" :disabled="isDrawing">
      {{ isDrawing ? '抽奖中...' : '开始抽奖' }}
    </button>

    <div v-if="result" class="result">
      恭喜获得: {{ result }}
    </div>
  </div>
</template>

样式优化

<style scoped>
.lottery-container {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.prize-list {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}

.prize-item {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.result {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #e74c3c;
}
</style>