vue做的一个一点就转的转盘组件

优点，无须等待接口返回，一点就转，数据返回才停到指定位置

待优化：目前转完一次都要重置，望改正

<template>
  <div>
    <div class="luck-wheel">
      <div id="luck-wheel" class="wheel" :style="rotateStyle"></div>
      <img class="control" :src="controlImg" @click="startRotate" />
    </div>
    <h1 @click="isAllowClick = false">stop</h1>
    <h1>记录转动后的角度 可大于360度 = {{deg}}</h1>
    <h1>在360度内 最后指针停下的角度 = {{rotate}}</h1>
  </div>
</template>

<script>
import startBtn from '../assets/img/btn_start_n.png'
import rotateBtn from '../assets/img/btn_start_s.png'
let t1 = 0
let t2 = 0
export default {
  props: {
    endrotate: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      // t1: 0,
      // t2: 0,
      divide: 90, // 平分度    注：必须修改
      speed: 0, // 转的幅度 默认匀速 最好为两个角度间 90/10  的十分之一  注：必须修改
      deg: 0, // 记录转动后的角度 可大于360
      rotate: 0, // 在360度内 最后指针停下的角度
      //   endrotate: false, // 传入endrotate
      isAllowClick: true, // 转动转盘的开关
      isAllowClick2: true, // 转动转盘的开关
      time: 100,
      controlImg: startBtn,
      rotateStyle:
        '-webkit-transform: rotate(' +
        this.deg +
        'deg);transform: rotate(' +
        this.deg +
        'deg);'
    }
  },
  watch: {
    endrotate(val) {
      if (val == 0) {
        this.reset()
      }
    }
  },
  methods: {
    reset() {
      t1 = 0
      t2 = 0
      this.speed = 0 // 转的幅度 默认匀速 最好为两个角度间 90/10  的十分之一  注：必须修改
      this.deg = 0 // 记录转动后的角度 可大于360
      this.rotate = 0 // 在360度内 最后指针停下的角度
      this.rotateStyle =
        '-webkit-transform: rotate(' +
        this.deg +
        'deg);transform: rotate(' +
        this.deg +
        'deg);'
    },
    startRotate() {
      let that = this
      that.isAllowClick = true
      that.controlImg = rotateBtn
      that.turntable()
    },
    endfuc() {
      let that = this

      if (that.endrotate) {
        let com = that.endrotate - that.rotate
        console.log(com)
        let comdeg = that.deg + com + 720

        // -----------------------计数时有问题--------------------------
        // let x = com * 1 + 720
        // let a = that.speed * that.speed / (2 * x)
        // t2 = setInterval(function() {
        //   if (that.isAllowClick2) {
        //     that.speed = that.speed <= 10 ? that.speed : that.speed - a
        //     that.deg = that.deg + that.speed
        //     that.rotate = that.deg % 360
        //     console.log('最终度数2')
        //     console.log(that.speed)
        //     if (that.deg > comdeg) {
        //       that.isAllowClick2 = false
        //     } else {
        //       that.rotateStyle =
        //         '-webkit-transform: rotate(' +
        //         that.deg +
        //         'deg);transform: rotate(' +
        //         that.deg +
        //         'deg);'

        //       console.log('最终度数')
        //       console.log(comdeg)
        //     }
        //   } else {
        //     for (let i = 0; i <= t2; i++) {
        //       clearInterval(i)
        //     }
        //     return
        //   }
        // }, that.time)
        //-------------------------END---------------------------

        //-------------------目前无bug------------------------
        that.rotateStyle =
          '-webkit-transform: rotate(' +
          comdeg +
          'deg);transform: rotate(' +
          comdeg +
          'deg);transition:all 2s ease-out'

        console.log('最终度数')
        console.log(comdeg)
        //------------------END---------------------

        that.isAllowClick = false
        that.controlImg = startBtn
        return
      }
    },
    turntable() {
      let that = this
      that.$emit('endlottery')
      t1 = setInterval(function() {
        console.log('最终度数')

        if (that.isAllowClick) {
          that.speed = that.speed >= 120 ? that.speed : that.speed + 10
          that.deg = that.deg + that.speed
          that.rotateStyle =
            '-webkit-transform: rotate(' +
            that.deg +
            'deg);transform: rotate(' +
            that.deg +
            'deg);transition:all 0.2s linear'
          that.rotate = that.deg % 360
          // console.log(that.deg)
          // console.log(that.deg % 360)
          that.endfuc()
        } else {
          for (let i = 0; i <= t1; i++) {
            clearInterval(i)
          }
        }
      }, that.time)
    }
  },

  mounted() {}
}
</script>

<style lang="less" scoped>
.luck-wheel {
  position: relative;
  width: 6rem;
  height: 6rem;
  background-size: cover;

  .wheel {
    width: 100%;
    height: 100%;
    background-image: url('../assets/img/lotterydial.png');
    background-size: cover;
  }

  .control {
    position: absolute;
    top: 1.95rem;
    left: 2rem;
    width: 2rem;
    height: 2.1rem;
  }
}
</style>

GitHub地址：https://github.com/chenrsen/turntable

注：尊重原创，转发请说明。谢谢