当前位置：首页 > VUE

vue实现转盘抽奖

2026-03-07 19:52:36VUE

Vue 实现转盘抽奖

基本结构

在 Vue 中实现转盘抽奖需要先定义转盘的基本结构，包括奖品区域和指针。以下是一个简单的 HTML 结构示例：

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

数据定义

定义奖品列表和旋转角度数据：

<script>
export default {
  data() {
    return {
      prizes: [
        { name: '奖品1' },
        { name: '奖品2' },
        { name: '奖品3' },
        { name: '奖品4' },
        { name: '奖品5' },
        { name: '奖品6' }
      ],
      rotateDeg: 0,
      spinning: false
    }
  }
}
</script>

样式设计

使用 CSS 设计转盘和指针的样式：

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

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

.prize {
  position: absolute;
  width: 50%;
  height: 50%;
  left: 0;
  top: 0;
  transform-origin: right bottom;
  text-align: center;
  line-height: 150px;
}

.pointer {
  position: absolute;
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 10;
}
</style>

旋转逻辑

实现转盘的旋转逻辑，包括随机选择奖品和计算旋转角度：

methods: {
  startSpin() {
    if (this.spinning) return;
    this.spinning = true;

    const randomIndex = Math.floor(Math.random() * this.prizes.length);
    const prizeDeg = (360 / this.prizes.length) * randomIndex;
    const fullRotations = 5; // 完整旋转圈数
    const totalDeg = 360 * fullRotations + (360 - prizeDeg);

    this.rotateDeg += totalDeg;

    setTimeout(() => {
      this.spinning = false;
      alert(`恭喜获得: ${this.prizes[randomIndex].name}`);
    }, 4000);
  }
}