当前位置：首页 > VUE

vue实现点击旋转轮盘

2026-01-12 05:55:46VUE

实现点击旋转轮盘

在Vue中实现点击旋转轮盘的效果，可以通过CSS动画和Vue的数据绑定结合完成。以下是一个完整的实现方法：

创建Vue组件

创建一个Vue组件，包含轮盘的HTML结构和样式：

<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>

添加组件逻辑

在Vue组件的<script>部分添加旋转逻辑：

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

      const minRotation = 1800; // 最小旋转角度
      const maxRotation = 3600; // 最大旋转角度
      const randomRotation = Math.floor(
        Math.random() * (maxRotation - minRotation + 1) + minRotation
      );

      this.rotation += randomRotation;

      setTimeout(() => {
        this.spinning = false;
        // 计算最终奖品
        const prizeIndex = this.calculatePrize();
        alert(`恭喜获得: ${this.items[prizeIndex]}`);
      }, 5000); // 匹配CSS动画时长
    },
    calculatePrize() {
      const normalizedRotation = this.rotation % 360;
      const sectorAngle = 360 / this.items.length;
      return Math.floor(normalizedRotation / sectorAngle);
    }
  }
}
</script>

添加CSS样式

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

<style>
.wheel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.wheel {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: conic-gradient(
    red 0% 16.66%,
    orange 16.66% 33.33%,
    yellow 33.33% 50%,
    green 50% 66.66%,
    blue 66.66% 83.33%,
    purple 83.33% 100%
  );
  position: relative;
  transition: transform 5s cubic-bezier(0.17, 0.67, 0.21, 0.99);
  cursor: pointer;
}

.wheel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 300px;
  color: white;
  font-weight: bold;
  transform-origin: center;
}

.wheel-item:nth-child(1) { transform: rotate(30deg); }
.wheel-item:nth-child(2) { transform: rotate(90deg); }
.wheel-item:nth-child(3) { transform: rotate(150deg); }
.wheel-item:nth-child(4) { transform: rotate(210deg); }
.wheel-item:nth-child(5) { transform: rotate(270deg); }
.wheel-item:nth-child(6) { transform: rotate(330deg); }
</style>

使用组件

在父组件中引入并使用这个轮盘组件：

<template>
  <div>
    <h1>幸运大转盘</h1>
    <wheel-component></wheel-component>
  </div>
</template>

<script>
import WheelComponent from './WheelComponent.vue';

export default {
  components: {
    WheelComponent
  }
}
</script>