vue实现抽奖大转盘

1. 实现原理

实际解决用户需求：当用户点击抽奖时，会请求接口获取中奖的奖品信息，前端根据中奖编号进行修改css样式，让转盘旋转，调整角度对应后端返回的奖品。如果抽奖有多次机会的话，每次需要抽奖结束后需要重置角度

2.html 代码

.wheel
    img.turntable(
     src='@/assets/img/second-anniversary/turntable.png'
     :style="{transform:'rotate('+rotateAngle+'deg)',transition:rotateTransition == ''?'transform 4s ease-out':rotateTransition }"
      )
    img.pointer(
       src='@/assets/img/second-anniversary/pointer.png'
       @click='lottery'
     )

transform:用来改变旋转的角度
transition: 旋转过渡效果

3. js逻辑代码

<script>
import {
    draw, getDrawCount } from '@/service/draw.js'
export default {
   
    data() {