vue2自定义转盘内容

<template>

  <div class="overall">

    <div class="zp-box">

      <div class="panzi" :style="{transition:'transform ' + time / 1000 + 's ease',transform:'rotate(' + rotate + 'deg)'}">

        <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(-5.5rem);`"

          v-for="(i,index) in list"

          :key="index"

        >

          <span class="title">{{i.title}}</span>

          <div class="img">

            img{{index}}

            <span class="title">{{i.title}}</span>

          </div>

        </div>

      </div>

    </div>

    <div>

      <button @click="onStart">start</button>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      winner: 2, //指定获奖下标 specified为true时生效

      specified: false, //是否指定获奖结果，false时为随机

      loading: false, //抽奖执行状态，防止用户多次点击

      panziElement: null,

      time: 5000, // 旋转时间

      rotate:0,

      pIndex:0, // 中奖物品的下标

      rotNum:0, // 旋转圈数基数

      list: [

        {

          title: '特等奖'

        },

        {

          title: '一等奖'

        },

        {

          title: '二等奖'

        },

        {

          title: '三等奖'

        },

        {

          title: '四等奖'

        },

        {

          title: '五等奖'

        },

        {

          title: '六等奖'

        },

        {

          title: '七等奖'

        },

        {

          title: '七等奖'

        },

        {

          title: '七等奖'

        },

        {

          title: '七等奖'

        },

        {

          title: '七等奖'

        }

      ]

    }

  },

  mounted() {

    //通过获取奖品个数，来改变css样式中每个奖品动画的旋转角度

    // var(--nums) 实现css动画根据奖品个数，动态改变

    let dataList = this.list||[];

    dataList.forEach((item,index)=>{

      let jiaodu = 360/dataList.length;

      item.angle = jiaodu*index

    });

    this.list = dataList;

    let root = document.querySelector(':root')

    root.style.setProperty('--nums', this.list.length)

  },

  methods: {

      onStart(){

          this.startBtn(this.list[1].angle);

      },

     // 开始转动,通过奖项级别进行匹配:id

      startBtn(val) {

          const self = this;

          // 拿到相应的角度调旋转接口

          self.startrotate(val, () => {

              self.fulfillHandle();

          });

      },

      //开始旋转 angle角度  complete回调成功函数

      startrotate(angle, complete) {

          // 相应的角度 + 满圈 只是在原角度多转了几圈 360 * 6

          this.rotate = 2160 * (this.rotNum + 1) - angle;

          clearTimeout(this.timer);

          // 设置5秒后停止旋转,处理接口返回的数据

          this.timer = setTimeout(() => {

              complete();

              clearTimeout(this.timer);

              this.rotNum++;

          }, this.time);

      },

      //得奖后的处理

      fulfillHandle() {

          alert(123123)

      },

  }

}

</script>

<style lang="scss" scoped>

$zp_size: 18rem; //转盘尺寸

$btn_size: 7rem; //抽奖按钮尺寸

$time: 3s; //转动多少秒后停下的时间

.zp-box {

  user-select: none;

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

   $zp_size;

  height: $zp_size;

  /* 盘子样式 */

  .panzi {

    overflow: hidden;

    border-radius: 50%;

    position: absolute;

     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 auto;

         2.5rem;

        height: 2.5rem;

        line-height: 2.5rem;

        border: 2px dashed #f87373;

        overflow: hidden;

        color: white;

        img {

          height: 100%;

        }

      }

    }

  }

  .bck-box {

    overflow: hidden;

    position: absolute;

     100%;

    height: 100%;

    left: 0;

    top: 0;

    // background: blue;

    border-radius: 50%;

    /* 转盘扇形背景 */

    .bck {

      box-sizing: border-box;

      position: absolute;

       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;

    }

  }

}

</style>