cdd-turntable

基本使用

  <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