用vue3封装一个转盘

Sure, here's an example of how you could use Vue 3 to create a spinning wheel:

<template>
  <div class="wheel">
    <div class="spinner" :style="{ transform: 'rotate(' + angle + 'deg)' }">
      <div v-for="(item, index) in items" :key="index" class="item" :style="{ transform: 'rotate(' + (360 / items.length) * index + 'deg)' }">
        {{ item }}
      </div>
    </div>
    <button @click="spin">Spin</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
      angle: 0,
      spinning: false
    }
  },
  methods: {
    spin() {
      if (this.spinning) return
      this.spinning = true
      const randomAngle = Math.floor(Math.random() * 360) + 3600
      this.angle += randomAngle
      setTimeout(() => {
        this.spinning = false
        const itemIndex = Math.floor((this.angle / 360) % this.items.length)
        alert(`You won ${this.items[itemIndex]}!`)
      }, 5000)
    }
  }
}
</script>

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

.spinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 5s ease-out;
}

.item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
  background-color: #3498db;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>

This code creates a spinning wheel with six items that the user can spin by clicking a button. When the wheel stops spinning, it selects a random item and displays an alert with the result.