基本使用

  <template>
    <div class="app">
      <turntable :size="size" :columns="columns" @start="handleStart" @end="handleEnd"></turntable>
      <h3>剩余抽奖次数：{{ count }}</h3>
    </div>
  </template>
  <script setup>
    import { ref } from "vue"
    import turntable from "@/packages/turntable.vue"

    const count = ref(2)

    // 转盘尺寸
    const size = 1
    // 轮盘的数据
    const columns = [
      {
        text: "20g水滴",
        icon: water_drop,
        id: "1",
      },
      {
        text: "谢谢参与",
        icon: love,
        id: "5",
      },
      ......
    ]
    // 回调函数（开始）
    const handleStart = (startRoate, stopRoate) => {
      
      if (!count.value) {
        // 次数为0取消抽奖
        startRoate(false)
        return
      }
      count.value --
      // 开始抽奖
      startRoate(true)

      // 2s后抽到的id为6
      setTimeout(() => {
        stopRoate(6)
      }, 2000)
    }

    // 回调函数（结束）
    const handleEnd = () => {
      alert('抽奖结束')
    }
  </script>

API

Props

| 参数 | 说明 | 类型 | 默认值 | | :----------: | :-------------------------------------------------------------: | :----------: | :----: | | size | 转盘的尺寸 | Number | 1 | | columns | 转盘奖品数组 | Array | [] | | columns-field-names | 自定义 columns 结构中的字段 | Object | {id: 'id', text: 'text', icon: 'icon'} |

Events

| 事件名 | 说明 | 回调参数 | | :--------------: | :------------------: | :------: | | start | 点击转盘开始 | 函数A和函数B，详见下图 | | end | 抽奖动画结束 | / |

start事件回调的两个函数参数

| 函数 | 说明 | 接收参数 | | :--------------: | :------------------: | :------: | | 函数A | 用于判断抽奖是否开启，传如true为开始转盘 | Boolean | | 函数B | 通过传入奖品的id，告知转盘停在哪个奖品处 | String |