当前位置：首页 > VUE

vue实现抽奖轮盘

2026-03-07 18:37:13VUE

Vue 实现抽奖轮盘

基本结构设计

使用 Vue 的模板语法构建轮盘的基础结构。轮盘通常由多个扇形区域组成，每个区域代表一个奖项。通过 CSS 实现轮盘的圆形布局和扇形分割。

vue实现抽奖轮盘

<template>
  <div class="wheel-container">
    <div class="wheel" :style="wheelStyle">
      <div 
        v-for="(item, index) in prizes" 
        :key="index" 
        class="wheel-item" 
        :style="getItemStyle(index)"
      >
        {{ item.name }}
      </div>
    </div>
    <button @click="startSpin">开始抽奖</button>
  </div>
</template>

数据与样式绑定

定义奖品列表和轮盘的旋转状态。通过计算属性动态生成每个扇形区域的旋转角度和颜色。

vue实现抽奖轮盘

<script>
export default {
  data() {
    return {
      prizes: [
        { name: '一等奖', color: '#FF5252' },
        { name: '二等奖', color: '#FF4081' },
        { name: '三等奖', color: '#E040FB' },
        { name: '四等奖', color: '#7C4DFF' },
        { name: '五等奖', color: '#536DFE' },
        { name: '六等奖', color: '#448AFF' }
      ],
      spinning: false,
      currentAngle: 0,
      resultIndex: 0
    };
  },
  computed: {
    wheelStyle() {
      return {
        transform: `rotate(${this.currentAngle}deg)`,
        transition: this.spinning ? 'transform 4s ease-out' : 'none'
      };
    },
    getItemStyle() {
      return (index) => {
        const angle = 360 / this.prizes.length;
        return {
          transform: `rotate(${angle * index}deg)`,
          backgroundColor: this.prizes[index].color
        };
      };
    }
  }
};
</script>

旋转动画逻辑

通过 setTimeout 和 transform 实现轮盘的旋转动画。旋转结束后，根据最终角度计算获奖结果。

methods: {
  startSpin() {
    if (this.spinning) return;
    this.spinning = true;
    this.resultIndex = Math.floor(Math.random() * this.prizes.length);
    const targetAngle = 360 * 5 + (360 / this.prizes.length) * this.resultIndex;
    this.currentAngle = targetAngle;

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

CSS 样式

使用 CSS 实现轮盘的视觉效果，包括居中布局、扇形区域和指针。

<style>
.wheel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wheel {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.wheel-item {
  position: absolute;
  width: 50%;
  height: 50%;
  left: 50%;
  top: 0;
  transform-origin: left bottom;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>