nw-squared-lottery v1.21.4

nw-squared-lottery

九宫格抽奖

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

使用

import引入

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

nw-squared-lottery的props

父组件可直接调用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;