当前位置：首页 > VUE

vue实现抽奖转盘

2026-03-08 19:41:37VUE

实现抽奖转盘的基本思路

抽奖转盘的实现主要依赖CSS动画和JavaScript逻辑控制。Vue框架可以方便地管理状态和绑定数据，结合CSS的transform和transition属性实现旋转效果。

核心代码结构

在Vue组件中，需要定义转盘区域、奖品列表以及控制旋转的方法。以下是一个基础实现示例：

vue实现抽奖转盘

<template>
  <div class="wheel-container">
    <div 
      class="wheel" 
      :style="{ transform: `rotate(${rotateDegree}deg)` }"
      @transitionend="onTransitionEnd"
    >
      <div 
        v-for="(prize, index) in prizes" 
        :key="index" 
        class="prize-item"
        :style="{ transform: `rotate(${index * sectorAngle}deg)` }"
      >
        {{ prize.name }}
      </div>
    </div>
    <button @click="startRotation" :disabled="isRotating">开始抽奖</button>
  </div>
</template>

数据与计算属性

定义奖品列表和计算每个奖品对应的扇形角度：

<script>
export default {
  data() {
    return {
      prizes: [
        { name: '奖品1', probability: 0.1 },
        { name: '奖品2', probability: 0.2 },
        // 更多奖品...
      ],
      rotateDegree: 0,
      isRotating: false,
      currentRotation: 0
    }
  },
  computed: {
    sectorAngle() {
      return 360 / this.prizes.length;
    }
  }
}
</script>

旋转控制方法

实现开始旋转和停止后的处理逻辑：

vue实现抽奖转盘

methods: {
  startRotation() {
    if (this.isRotating) return;

    this.isRotating = true;
    // 随机选择奖品（可根据概率调整）
    const randomIndex = Math.floor(Math.random() * this.prizes.length);
    const targetAngle = 360 * 5 + (360 - randomIndex * this.sectorAngle);

    this.currentRotation = this.currentRotation % 360;
    this.rotateDegree = this.currentRotation + targetAngle;
  },
  onTransitionEnd() {
    this.isRotating = false;
    this.currentRotation = this.rotateDegree % 360;
    // 获取最终奖品
    const prizeIndex = Math.floor(
      (360 - this.currentRotation % 360) / this.sectorAngle
    ) % this.prizes.length;
    alert(`恭喜获得: ${this.prizes[prizeIndex].name}`);
  }
}

CSS样式设计

转盘的视觉效果通过CSS实现：

<style>
.wheel-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  transition: transform 4s cubic-bezier(0.17, 0.67, 0.21, 0.99);
  transform: rotate(0deg);
}

.prize-item {
  position: absolute;
  width: 50%;
  height: 50%;
  left: 0;
  top: 0;
  transform-origin: right bottom;
  text-align: center;
  line-height: 150px;
  font-size: 14px;
}
</style>