当前位置：首页 > VUE

vue实现抽奖转盘

2026-01-16 06:16:25VUE

Vue 抽奖转盘实现方法

使用 Vue 实现抽奖转盘可以通过以下步骤完成：

准备基本结构

在 Vue 组件中定义转盘的基本 HTML 结构和样式。转盘通常由一个圆形区域和多个扇形奖项组成。

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

定义数据和方法

在 Vue 的 script 部分定义转盘所需的数据和方法：

vue实现抽奖转盘

<script>
export default {
  data() {
    return {
      prizes: [
        { name: '一等奖', color: '#FF0000' },
        { name: '二等奖', color: '#00FF00' },
        { name: '三等奖', color: '#0000FF' },
        { name: '四等奖', color: '#FFFF00' },
        { name: '五等奖', color: '#FF00FF' },
        { name: '六等奖', color: '#00FFFF' }
      ],
      spinning: false,
      rotation: 0,
      resultIndex: 0
    }
  },
  computed: {
    wheelStyle() {
      return {
        transform: `rotate(${this.rotation}deg)`,
        transition: this.spinning ? 'transform 4s ease-out' : 'none'
      }
    }
  },
  methods: {
    getPrizeStyle(index) {
      const angle = 360 / this.prizes.length
      return {
        transform: `rotate(${angle * index}deg)`,
        'background-color': this.prizes[index].color,
        'clip-path': `polygon(50% 50%, 50% 0%, ${50 + 50 * Math.tan((angle * Math.PI) / 360)}% 0%)`
      }
    },
    startSpin() {
      if (this.spinning) return
      this.spinning = true
      this.resultIndex = Math.floor(Math.random() * this.prizes.length)
      const fullRotations = 5 // 完整旋转圈数
      const targetRotation = 360 * fullRotations + (360 - (360 / this.prizes.length) * this.resultIndex)
      this.rotation = targetRotation

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

添加样式

为转盘添加必要的 CSS 样式：

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

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

.prize-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;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>