luck-draw-react/README.md

luck-draw-react

# 9宫格抽奖
# API
 属性      | 说明     | 类型     | 默认值     
| ------------- | ------------- |------------- | ------------- |
giftList    | 所有的奖品 | arr     | null| 必填
gift     | 中奖的奖品 | number     | null| 非必填
playBtn | 开始按钮的文案 | String/React.Element     | 立即抽奖| 非必填
times    | 抽奖的次数  | number     | 1| 非必填
speed    | 默认减速到ms展示结果  | number    | 120| 非必填
CYCLE_TIMES   | 50ms的速度转多少圈  |  number | 3| 非必填
className| 样式  | object   | ''| 非必填
callback| 每次抽完奖的回调  | (item): void     | ''| 非必填
finishCallback| 抽奖次数用完的回调  | (content, props): void    | ''| 非必填

```
giftList = [{
                name: '奖品1',
                id: 1,
                ele: <div className={`custom_item`}>
                    <div className={`custom_item_main`}>
                    奖品1
                    </div>
                </div>
            }, {
                name: '奖品2',
                id: 2,
            }, {
                name: '奖品3',
                id: 3,
                ele: <div className={`custom_item`}>
                    <div className={`custom_item_main`}>
                    奖品2
                    </div>
                </div>
            }, {
                name: '奖品4',
                image: '',
                id: 4,
            }, {
                name: '奖品5',
                id: 5,
            }, {
                name: '奖品6',
                id: 6,
                ele: <div className={`custom_item`}>
                    <div className={`custom_item_main`}>
                    奖品3
                    </div>
                </div>
            }, {
                name: '奖品7',
                id: 7,
            }, {
                name: '奖品8',
                id: 8,
            }]
```


# 奖品数据顺序
   1  2  3
   4     5
   6  7  8


#  用法
```
    import { LuckDraw } from 'LuckDraw'
    import 'luck-draw-react/dist/luck-draw.css';
    <LuckDraw
      giftList={this.state.luck_draw_data}
      times={this.state.sudoku_lottery_times}
      gift={this.state.gift}
      speed={120}
      callback={(act_item, e) => {
          console.log(act_item, e)
          e.reset()
          alert('中奖了')
      }}
      playBtn={<div className={`custom_item`}><div className={`custom_item_btn`} > </div></div>}
      beforeStart={() => {
          return new Promise((resolve) => {
              setTimeout(() => {
                  this.setState({
                      gift: { id: 3 }
                  })
                  resolve(11111)
              }, 1000)
          })
      }}
      finishCallback={(e) => {
          alert('没有次数了')
      }}
  ></LuckDraw>
```


#  注意： 

    调用抽奖组件的方法： 1. 通过ref,  2. 通过callback回调函数参数中的current对象，例如：current.reset()