class100-integral 大课组件 计分板

何时使用

开发基于dva的react组件时

npm install -S class100-integral 

API

import { Integral, Ranking, Scoreboard } from 'class100-integral';

Integral 计分板组件 API

| 参数 | 说明 | 类型 | 默认值 | |------------|----------------|------------------|--------------| | className | 类名 | string | 无 | | teams | team列表 | array | 无 | | showNum | 排名每页显示个数 | number | 6 | | onAddTeam | 添加team | function({ team: {}, teams: [] }) | 无 | | onDeleteTeam | 删除team | function({ team: {}, teams: [] }) | 无 | | onAddPoints | team加分 | function({ team: {}, teams: [] }) | 无 | | onTeamChange | team信息修改 | function({ team: {}, teams: [] }) | 无 | | onShowTable | 显示排名 | function({ teams: [] }) | 无 | | onHideTable | 隐藏排名 | function({}) | 无 | | onRankingPrev | 排名上一页 | function({ page: 1, teams: [] }) | 无 | | onRankingNext | 排名下一页 | function({ page: 1, teams: [] }) | 无 |

Ranking 计分排位组件 API

| 参数 | 说明 | 类型 | 默认值 | |------------|----------------|------------------|--------------| | className | 类名 | string | 无 | | teams | 显示team例表数据 | array | 无 |

Scoreboard 添加分数组件 API

| 参数 | 说明 | 类型 | 默认值 | |------------|----------------|------------------|--------------| | className | 类名 | string | 无 | | team | 当前team数据 | object | 无 |

team json

{
 id: md5(new Date() + Math.random()),    // id
 ranking: 1,    // 排名
 name: 'team-1',    // 名称
 addPoints: 0,   // 添加分数
 points: 0,   // 总分
}

开发

1. clone 代码

git clone https://github.com/hexiao-o/IntegralPlate.git

2. 安装依赖和启动服务

1. 新开窗口 cd class100-integral && npm install && cd example && npm install
2. 新开窗口 npm run dev

3. 打开网页

open http://localhost:3000