更新记录

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>

配置参数

参数 类型 说明
width Number 转盘宽
height Number 转盘高
prizeList Object 奖品信息列表
targetIndex Number/String 获奖下标

prizeList

奖品名称 奖品图片 奖品库存
name count image

插件初始化

  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()
    }
  }

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问