ReactRouletteSlot

基于React的轮盘抽奖程序

在线Demo

---

项目介绍

📦 安装

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 [e-mail]: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