更新记录

1.0.0（2020-05-06） 下载此版本

v1.0.0

平台兼容性

导入组件

import myTurntableDraw from '@/components/my-turntable-draw/my-turntable-draw'

使用组件

  <my-turntable-draw
    ref="raffleWheel" 
    :width="boxData.width"
    :height="boxData.height"
    :prizeList="prizeList"
    :targetIndex="targetIndex"
    @befoterClick="befoterClick"
    @afterClick="afterClick"
  >
  </my-turntable-draw>

配置参数

prizeList

插件初始化

  this.prizeList = Array

若初始化失败，请手动调用setView方法 this.$refs.raffleWheel.setView()

回调函数

befoterClick: 开始抽奖

  befoterClick(data) {
    if(data.type == 'start') {
      console.log('开始抽奖')
      // 获取中奖单位下标
      let _n = Math.floor(Math.random() * this.prizeList.length)
      console.log('选中商品项：' + _n)
      console.log('选中商品名：' + this.prizeList[_n].name)
      this.targetIndex = _n
      data.callback && data.callback(_n)
    }
  }

afterClick: 结束抽奖

  afterClick(data) {
    if(data.type == 'end') {
      console.log(data.content.count)
      data.callback && data.callback()
    }
  }

重复调用开始抽奖示例

  // 多次执行
  toBefoterClick(n) {
    console.log('剩余次数：' + this.indexNum)
    if(this.indexNum <= 0) {return false}
    setTimeout(() => {
      this.indexNum--
      this.$refs.raffleWheel.handleAction()
    }, 100)
  }

  afterClick(data) {
    if(data.type == 'end') {
      console.log(data.content.count)
      data.callback && data.callback()
      // 多次执行
      this.toBefoterClick()
    }
  }