当前位置：首页 > VUE

vue实现点击旋转轮盘

2026-03-27 03:51:29VUE

实现点击旋转轮盘

使用Vue实现点击旋转轮盘可以通过结合CSS动画和Vue的数据绑定功能来完成。以下是一个完整的实现方案：

核心代码结构

<template>
  <div class="wheel-container">
    <div 
      class="wheel" 
      :style="{ transform: `rotate(${rotation}deg)` }"
      @click="spinWheel"
    >
      <div class="wheel-item" v-for="(item, index) in items" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

数据与状态管理

<script>
export default {
  data() {
    return {
      rotation: 0,
      isSpinning: false,
      items: ['奖品1', '奖品2', '奖品3', '奖品4', '奖品5', '奖品6']
    }
  },
  methods: {
    spinWheel() {
      if (this.isSpinning) return

      this.isSpinning = true
      const spinDuration = 3000
      const targetRotation = this.rotation + 1800 + Math.random() * 360

      this.rotation = targetRotation

      setTimeout(() => {
        this.isSpinning = false
        const selectedIndex = this.calculateSelectedItem()
        alert(`恭喜获得: ${this.items[selectedIndex]}`)
      }, spinDuration)
    },
    calculateSelectedItem() {
      const normalizedRotation = this.rotation % 360
      const segmentAngle = 360 / this.items.length
      return Math.floor(normalizedRotation / segmentAngle)
    }
  }
}
</script>

样式设计

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

.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #ff0000 0deg 60deg,
    #00ff00 60deg 120deg,
    #0000ff 120deg 180deg,
    #ffff00 180deg 240deg,
    #ff00ff 240deg 300deg,
    #00ffff 300deg 360deg
  );
  position: relative;
  transition: transform 3s cubic-bezier(0.17, 0.67, 0.12, 0.99);
  cursor: pointer;
}

.wheel-item {
  position: absolute;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: white;
  font-weight: bold;
  transform-origin: 150px 150px;
}
</style>

实现要点

每个奖品项的位置需要通过计算确定，可以在mounted钩子中添加位置计算逻辑：

mounted() {
  this.positionItems()
},
methods: {
  positionItems() {
    const angleStep = 360 / this.items.length
    this.items.forEach((_, index) => {
      const angle = index * angleStep
      const element = this.$el.querySelectorAll('.wheel-item')[index]
      element.style.transform = `rotate(${angle}deg) translate(100px) rotate(${-angle}deg)`
    })
  }
}