更新记录

1.0.0（2023-04-17） 下载此版本

初次提交

平台兼容性

详细使用详见demo

<template>
  <div id="app">
    <div class="big-wheel-box">
      <hxrWheelNew
        width="3rem"
        height="3rem"
        ref="hxrWheelNew"
        :prizeList="prizeList"
        @over="over">
        <template v-slot:item="{ item }">
          <div class="prize-name">{{item.txt}}</div>
          <img class="prize-img" :src="item.img">
        </template>
      </hxrWheelNew>

      <!-- 开始按钮 -->
      <img class="btn-go" @click="go" src="你的图标" />
    </div>
  </div>
</template>

<script>
import hxrWheelNew from '@/components/hxr-wheel-new'

export default {
  name: 'App',
  data() {
    return {
      prizeList: [
        {
          txt: '你的奖项标题',
          img: '你的图标'
        },
        {
          txt: '你的奖项标题',
          img: '你的图标'
        },
        {
          txt: '你的奖项标题',
          img: '你的图标'
        },
        {
          txt: '你的奖项标题',
          img: '你的图标'
        },
        {
          txt: '你的奖项标题',
          img: '你的图标'
        },
        {
          txt: '你的奖项标题',
          img: '你的图标'
        }
      ],
      valve: false, // 防止连续点击
    }
  },
  methods: {
    // 开始转动
    go() {
      if (this.valve) {
        return
      }
      this.valve = true

      // 模拟随机数，这里可以请求后台获取中将信息
      const index = Math.floor(Math.random() * this.prizeList.length)
      this.winningIndex = index

      // 转动转盘
      this.$refs.hxrWheelNew.rotate(index)
    },
    // 转盘转完事件
    over(prizeInfo) {
      //alert(`恭喜获得${prizeInfo.txt}`)
      this.valve = false
    }
  },
  components: {
    hxrWheelNew
  }
}
</script>

<style lang="scss">

#app {
  position: relative;
  overflow: hidden;
  width: 100vw;
  min-height: 100vh;
  background-image: url('你的页面背景');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  .big-wheel-box {
    position: absolute;
    top: 1.7rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 0;
    background-image: url('你的轮盘背景');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    padding: .22rem;
    .prize-name {
      position: absolute;
      left: .13rem;
      right: .13rem;
      top: .2rem;
      font-size: .14rem;
      text-align: center;
      color: #7D2A00;
    }
    .prize-img {
      position: absolute;
      top: .58rem;
      left: 50%;
      transform: translateX(-50%);
      width: .3rem;
      height: .3rem;
    }
    .btn-go {
      position: absolute;
      top: 1.19rem;
      left: 50%;
      transform: translateX(-50%);
      width: .8rem;
    }
  }
}
</style>