项目介绍

📦 安装

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 [email protected]: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