当前位置：首页 > VUE

vue实现抽奖功能

2026-01-18 01:45:49VUE

实现抽奖功能的基本思路

在Vue中实现抽奖功能通常涉及随机选择奖项、动画效果展示以及结果回调。核心逻辑包括奖项配置、动画控制和中奖概率计算。

奖项配置与概率设置

定义一个奖项数组，包含奖品名称、图片和中奖概率。概率可采用权重或百分比形式：

vue实现抽奖功能

data() {
  return {
    prizes: [
      { name: '一等奖', image: 'prize1.png', weight: 1 },
      { name: '二等奖', image: 'prize2.png', weight: 5 },
      { name: '三等奖', image: 'prize3.png', weight: 10 }
    ],
    isRolling: false,
    result: null
  }
}

随机选择算法

使用权重随机算法确定中奖项。计算总权重后生成随机数匹配区间：

methods: {
  drawLottery() {
    if (this.isRolling) return;

    const totalWeight = this.prizes.reduce((sum, prize) => sum + prize.weight, 0);
    const random = Math.random() * totalWeight;
    let currentWeight = 0;

    for (const prize of this.prizes) {
      currentWeight += prize.weight;
      if (random <= currentWeight) {
        this.animateResult(prize);
        break;
      }
    }
  }
}

动画效果实现

通过CSS过渡或JavaScript动画库（如GSAP）实现转盘效果。示例使用CSS动画：

vue实现抽奖功能

<template>
  <div class="prize-wheel">
    <div 
      v-for="(prize, index) in prizes" 
      :key="index"
      class="prize-item"
      :style="{ transform: `rotate(${index * (360 / prizes.length)}deg)` }"
    >
      {{ prize.name }}
    </div>
    <div class="pointer" @click="drawLottery"></div>
  </div>
</template>

<style>
.prize-wheel {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  transition: transform 3s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}
.prize-item {
  position: absolute;
  width: 100%;
  text-align: center;
  transform-origin: 50% 150px;
}
</style>

完整组件示例

整合逻辑与动画的完整组件代码：

<template>
  <div>
    <div 
      class="wheel" 
      :style="{ transform: `rotate(${rotation}deg)` }"
      @transitionend="onTransitionEnd"
    >
      <div v-for="(prize, i) in prizes" :key="i" class="prize">
        {{ prize.name }}
      </div>
    </div>
    <button @click="startRoll" :disabled="isRolling">
      {{ isRolling ? '抽奖中...' : '开始抽奖' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rotation: 0,
      targetRotation: 0,
      isRolling: false,
      prizes: [
        /* 奖项配置 */
      ]
    }
  },
  methods: {
    startRoll() {
      this.isRolling = true;
      this.rotation = this.rotation % 360;
      const selectedIndex = this.getRandomPrizeIndex();
      this.targetRotation = 360 * 5 + (360 - (selectedIndex * (360 / this.prizes.length)));

      setTimeout(() => {
        this.rotation = this.targetRotation;
      }, 10);
    },
    getRandomPrizeIndex() {
      /* 随机选择逻辑 */
    },
    onTransitionEnd() {
      this.isRolling = false;
      this.$emit('draw-end', this.prizes[this.calculateResultIndex()]);
    },
    calculateResultIndex() {
      const degPerPrize = 360 / this.prizes.length;
      return Math.floor(((360 - (this.targetRotation % 360)) % 360) / degPerPrize);
    }
  }
}
</script>

九宫格抽奖变体

对于九宫格形式的抽奖，可采用高亮移动效果：

data() {
  return {
    blocks: Array(9).fill().map((_, i) => ({ id: i, active: false })),
    currentIndex: 0,
    speed: 100,
    timer: null
  }
},
methods: {
  startHighlight() {
    this.timer = setInterval(() => {
      this.blocks[this.currentIndex].active = false;
      this.currentIndex = (this.currentIndex + 1) % this.blocks.length;
      this.blocks[this.currentIndex].active = true;
    }, this.speed);
  },
  stopAtResult(index) {
    clearInterval(this.timer);
    // 最终停留在指定index
  }
}