vue3编写转盘代码

以下为一个简单的Vue3转盘代码示例：

<template>
  <div class="container">
    <div class="wheel" :style="{ transform: 'rotate(' + angle + 'deg)' }">
      <div class="slice" v-for="(slice, index) in slices" :key="index" :style="{ backgroundColor: slice.color }"></div>
    </div>
    <button class="spin-button" @click="spin">SPIN</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'Wheel',
  setup() {
    const slices = [
      { color: '#FF4136', text: 'Prize 1' },
      { color: '#FF851B', text: 'Prize 2' },
      { color: '#FFDC00', text: 'Prize 3' },
      { color: '#2ECC40', text: 'Prize 4' },
      { color: '#0074D9', text: 'Prize 5' },
      { color: '#B10DC9', text: 'Prize 6' },
    ];
    const angle = ref(0);

    function spin() {
      const baseAngle = 360 / slices.length;
      const randomAngle = Math.floor(Math.random() * slices.length) * baseAngle;
      angle.value = 360 * 5 + randomAngle; // spin 5 rounds + random angle
    }

    return {
      slices,
      angle,
      spin,
    };
  },
};
</script>

<style scoped>
.container {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
}
.wheel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 5s cubic-bezier(0.1, 0.9, 0.2, 1);
}
.slice {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
.spin-button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #0074D9;
  color: #fff;
  border: none;
  cursor: pointer;
}
</style>

此代码中有一个容器，其中包含一个旋转的转盘和一个旋转按钮。转盘由多个切片组成，每个切片具有不同的颜色和文本。单击旋转按钮时，转盘会旋转5圈，然后停止在随机的切片上。

在Vue3中，我们使用setup函数来设置组件，并使用ref定义可响应的变量。在此示例中，我们定义了slices和angle变量，以及一个spin函数，该函数随机选择一个切片并旋转转盘。最后，我们将这些变量和函数导出以供模板使用。