vue3+ts，转盘抽奖

<template>
  <div class="overall">
    <div class="zp-box">
      <div class="panzi" ref="panzi">
        <div
          class="bck-box"
          :style="` transform: rotate(${-90 + 180 / list.length}deg)`"
        >
          <div
            class="bck"
            v-for="(i, index) in list"
            :key="index"
            :style="`transform: rotate(${
              (-index * 360) / list.length
            }deg) skew(${-90 + 360 / list.length}deg);`"
          ></div>
        </div>
        <div
          class="jiang"
          :style="`transform: rotate(${
            (-index * 360) / list.length
          }deg) translateY(-7.5rem);`"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="img">
            <!-- <img src="@/assets/img/bck.jpg" alt /> -->
            奖品{{ index }}
          </div>
          <span class="title">{{ item.title }}</span>
        </div>
      </div>
      <div class="start-btn" @click="start()">抽奖</div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, onMounted, computed } from 'vue'

export default {
  setup() {
    const winner = ref(2) //指定获奖下标 specified为true时生效
    const specified = ref(false) //是否指定获奖结果，false时为随机
    const loading = ref(false) //抽奖执行状态，防止用户多次点击
    let panziElement: HTMLElement | null = null
    const list = [
      {
        title: '特等奖',
      },
      {
        title: '一等奖',
      },
      {
        title: '二等奖',
      },
      {
        title: '三等奖',
      },
      {
        title: '四等奖',
      },
      {
        title: '五等奖',
      },
      {
        title: '六等奖',
      },
      {
        title: '七等奖',
      },
    ]

    onMounted(() => {
      //通过获取奖品个数，来改变css样式中每个奖品动画的旋转角度
      // var(--nums) 实现css动画根据奖品个数，动态改变
      let root = document.querySelector(':root') as HTMLElement
      root.style.setProperty('--nums', list.length.toString())
    })

    //开始抽奖
    const start = () => {
      if (!loading.value) {
        panziElement = document.querySelector('.panzi') as HTMLElement
        panziElement.classList.remove(animationClass.value)
        if (specified.value) {
          //此处可指定后端返回的指定奖品
          // winner.value = winner.value;
          winCallback()
        } else {
          winner.value = random(0, list.length - 1)
          winCallback()
        }
        loading.value = true
      }
    }

    //中奖返回方法
    const winCallback = () => {
      setTimeout(() => {
        /* 此处是为了解决当下次抽中的奖励与这次相同，动画不重新执行的 */
        /* 添加一个定时器，是为了解决动画属性的替换效果，实现动画的重新执行 */
        panziElement!.classList.add(animationClass.value)
      }, 0)
      // 因为动画时间为 3s ，所以这里3s后获取结果，其实结果早就定下了，只是何时显示，告诉用户
      setTimeout(() => {
        loading.value = false
        console.log(`恭喜你获得了${winner.value}`)
      }, 3000)
    }

    //对应css样式中定义的class属性值,如果有更多的话可以继续添加  case 8:   return 'wr8'
    const animationClass = computed(() => {
      switch (winner.value) {
        case 0:
          return 'wr0'
        case 1:
          return 'wr1'
        case 2:
          return 'wr2'
        case 3:
          return 'wr3'
        case 4:
          return 'wr4'
        case 5:
          return 'wr5'
        case 6:
          return 'wr6'
        case 7:
          return 'wr7'
        default:
          return ''
      }
    })

    //随机一个整数的方法
    const random = (min: number, max: number) => {
      return Math.floor(Math.random() * (max - min + 1)) + min
    }

    return {
      winner,
      specified,
      loading,
      list,
      start,
      animationClass,
    }
  },
}
</script>
<style lang="scss" scoped>
$zp_size: 23rem; //转盘尺寸
$btn_size: 7rem; //抽奖按钮尺寸
$time: 3s; //转动多少秒后停下的时间
.zp-box {
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: $zp_size;
  height: $zp_size;
  /* 抽奖按钮 */
  .start-btn {
    display: inline-block;
    background: #f53737;
    position: relative;
    z-index: 2;
    cursor: pointer;
    width: $btn_size;
    height: $btn_size;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    &::before {
      content: '';
      width: 0;
      height: 0;
      border: 2rem solid transparent;
      border-top: 3rem solid transparent;
      border-bottom: 3rem solid #f53737;
      position: absolute;
      top: -5rem;
      z-index: -1;
    }
  }
  /* 盘子样式 */
  .panzi {
    overflow: hidden;
    border-radius: 50%;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 10px solid #f74e4e;
    box-sizing: border-box;
    /* 每个奖项的样式 */
    .jiang {
      position: absolute;
      .title {
        font-weight: bold;
        font-size: 18px;
        color: #3b3b3b;
      }
      .img {
        margin: 0.5rem;
        width: 3rem;
        height: 2.5rem;
        line-height: 2.5rem;
        border: 2px dashed #f87373;
        overflow: hidden;
        color: #000;
        img {
          height: 100%;
        }
      }
    }
  }
  .bck-box {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    // background: blue;
    border-radius: 50%;

    /* 转盘扇形背景 */
    .bck {
      box-sizing: border-box;
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 1;
      top: -50%;
      left: 50%;
      transform-origin: 0% 100%;
      // transform:skew(30deg);
    }
    /* 转盘背景色 */
    .bck:nth-child(2n) {
      background: #fffcb9;
    }
    .bck:nth-child(2n + 1) {
      background: #f8a281;
      box-shadow: 0 0 5px red;
    }
  }

  /* 下面的css样式为每个奖品的旋转动画，这里写了对应8个奖品的动画，如果想要更多的话，可以添加 */
  /* 例如： .wr8  @keyframes play8 */
  .wr0,
  .wr1,
  .wr2,
  .wr3,
  .wr4,
  .wr5,
  .wr6,
  .wr7 {
    animation-duration: $time;
    animation-timing-function: ease;
    animation-fill-mode: both;
    animation-iteration-count: 1;
  }
  .wr0 {
    animation-name: play0;
  }
  .wr1 {
    animation-name: play1;
  }
  .wr2 {
    animation-name: play2;
  }
  .wr3 {
    animation-name: play3;
  }
  .wr4 {
    animation-name: play4;
  }
  .wr5 {
    animation-name: play5;
  }
  .wr6 {
    animation-name: play6;
  }
  .wr7 {
    animation-name: play7;
  }
  @keyframes play0 {
    to {
      transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 0));
    }
  }
  @keyframes play1 {
    to {
      transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 1));
    }
  }
  @keyframes play2 {
    to {
      transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 2));
    }
  }
  @keyframes play3 {
    to {
      transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 3));
    }
  }
  @keyframes play4 {
    to {
      transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 4));
    }
  }
  @keyframes play5 {
    to {
      transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 5));
    }
  }
  @keyframes play6 {
    to {
      transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 6));
    }
  }
  @keyframes play7 {
    to {
      transform: rotate(calc(5 * 360deg + 360deg / var(--nums) * 7));
    }
  }
}
</style>