0.3.4 • Published 6 years ago
react-roulette-slot v0.3.4
项目介绍
📦 安装
npm install react-roulette-slot --save
yarn add react-roulette-slot --save
🔨 示例
import APP from 'react-roulette-slot';
ReactDOM.render(<APP />, mountNode);
const action = (cb) => {
// 发出请求, 请求成功后,调cb.
cb({ data: 1000 });
};
const data = const data = [
{ id: 1000, img: 'http://dummyimage.com/30x30', label: 'Larry' },
{ id: 1001, img: 'http://dummyimage.com/30x30', label: 'Joseph' },
{ id: 1003, img: 'http://dummyimage.com/30x30', label: 'Paul' },
{ id: 1004, img: 'http://dummyimage.com/30x30', label: 'Ronald' },
{ id: 1005, img: 'http://dummyimage.com/30x30', label: 'Helen' },
{ id: 1006, img: 'http://dummyimage.com/30x30', label: 'Maria' },
{ id: 1007, img: 'http://dummyimage.com/30x30', label: 'Mark' },
{ id: 1008, img: 'http://dummyimage.com/30x30', label: 'Mark' },
{ id: 1009, img: 'http://dummyimage.com/30x30', label: 'Carol' },
{ id: 1010, img: 'http://dummyimage.com/30x30', label: 'Ronald' },
{ id: 1011, img: 'http://dummyimage.com/30x30', label: 'Nancy' },
{ id: 1012, img: 'http://dummyimage.com/30x30', label: 'Michelle' },
];
const App = () => {
return (
<ReactRouletteSlot
data={data}
action={action}
size={300}
/>
}
⌨️ 本地开发
$ git clone git@github.com:wZi/ReactRouletteSlot.git
$ cd ReactRouletteSlot
$ yarn
$ yarn dev
🔨 测试
$ yarn test
$ yarn test:w ## 监听变化
$ yarn open ## 查看代码覆盖率
💡 Props
type ReactRouletteSlotProps = {
// 抽奖数据
data: RouletteSlotData;
// 每行个数
row?: number;
action: ActionType;
// 宽跟高
width: number;
height: number;
BingoItem?: (props: { data: RouletteSlotDataItem }) => JSX.Element;
LuckyButton?: () => JSX.Element;
};
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
data | 抽奖数据,长度必须为偶数, 建议 12 个. | RouletteSlotData | -- |
row | 每行个数 | number | 4 |
action | 点击抽奖的触发的方法, 不在组件内限制请求方式. | ActionType | -- |
width | 轮盘的宽度 | number | 300 |
height | 轮盘的高度 | number | 300 |
BingoItem | 中奖后提示内容, 要 React 组件 | (props: { data: RouletteSlotDataItem }) => JSX.Element | 内部实现 |
LuckyButton | 中间抽奖按钮的样式 | () => JSX.Element | 内部实现 |
RouletteSlotData
// 数据格式
interface RouletteSlotDataItem {
// 名称
label: string | JSX.Element;
// 图片
img: string;
// 商品 ID
id: number;
}
type RouletteSlotData = RouletteSlotDataItem[];
ActionType:
- data 为抽奖结果的 id
- isWin 为是否中奖的标识符, 默认为 true
type ActionType = (
cb: ({ data, isWin }: { data: number | string; isWin?: boolean }) => void
) => void;
💬 其他
功能还不完善,有任何意见和建议,欢迎提issue
0.3.4
6 years ago
0.3.2
6 years ago
0.3.3
6 years ago
0.3.0
6 years ago
0.2.7
6 years ago
0.2.6
6 years ago
0.2.5
6 years ago
0.2.4
6 years ago
0.2.3
6 years ago
0.2.2
6 years ago
0.2.1
6 years ago
0.2.0
6 years ago
0.1.11
6 years ago
0.1.10
6 years ago
0.1.9
6 years ago
0.1.8
6 years ago
0.1.7
6 years ago
0.1.6
6 years ago
0.1.5
6 years ago
0.1.4
6 years ago
0.1.3
6 years ago
0.1.2
6 years ago
0.1.1
6 years ago