nw-squared-lottery

九宫格抽奖

React组件，支持九宫格、十六宫格、N宫格抽奖。

使用

import引入

$ npm install nw-squared-lottery
//or
yarn add nw-squared-lottery

nw-squared-lottery的props

| Name | Type | Default value | Description | | --- | --- | --- | --- | | instance | object | | (必填)父组件的instance | | count | number | | (必填)奖项个数 | | prizePos | number | | (必填)中奖index | | onRefresh | func | | (必填)每移动一格，调用一次，参数activeIndex | | onFinished | func | | (必填)抽奖结束，参数isSuccess，正常结束true，若中途异常中断，参数为false | | containerClass | string | 'nw-lottery-wrap' | 九宫格所在的容器 | | initCycle | number | 50 | 转动基本次数：即至少需要转动多少次再进入抽奖环节 | | speed | number | 100 | 初始转动速度，单位毫秒 | | slowTimes | number | 11 | 保证减慢的次数 |

父组件可直接调用this..onStart()、this.onAbort()去开始or中断抽奖

示例

在线demo，可以查看https://yaolufe.hz.netease.com/rc/docs/squaredLottery

import React, { Component } from 'react';
import SquaredLottery from 'nw-squared-lottery';

class App extends Component {
  constructor(props) {
    super(props);
    this.lotteryConfig = {
        instance: this,
        count: 12,
        onRefresh: this.onRefresh.bind(this),
        onFinished: this.onFinished.bind(this)
    }

    this.state = {
        activeIndex: 0,
        prizePos: -1   //中奖index
    };

    this.startLottery = this.startLottery.bind(this);
  }

  // 开始抽奖，异步获得prizePos后，通过props传递
  startLottery() {
    this.onStart();
    //this.setState({prizePos: x)})
  }

  // 更新activeIndex
  onRefresh(activeIndex) {
      this.setState({activeIndex})
  }

  // 抽奖结束
  onFinished(_isSuccess) {
  }

  render() {
    this.lotteryConfig.prizePos = this.state.prizePos;
    return (
      <div className="App">
      <SquaredLottery {...this.lotteryConfig}>
          <table>
            <tbody>
              <tr>
                <td>0</td><td>1</td><td>2</td>
              </tr>
              <tr>
                <td>7</td>
                <td>
                  <a className="btn" href="javascript:;" onClick={this.startLottery}></a>
                </td>
                <td>3</td>
              </tr>
              <tr>
                <td>6</td><td>5</td><td>4</td>
              </tr>
            </tbody>
          </table>
        </SquaredLottery>
        <button className="btn-abort" onClick={this.onAbort}>中断</button>
      </div>
    );
  }
}

export default App;