大家好,我是前端实验室的大师兄！
不知道大家有没有在手机上抽过奖呢？又不知道大家有没有做过抽奖小程序呢？
想当年大师兄刚入行的时候，领导分配的第一个任务就是做一个九宫格抽奖程序，不仅要求中奖概率还要求中奖范围，更重要的是不能有人中奖！！！当时的痛苦场景大师兄还历历在目，写的头都大了
为了不让前端同行们再为抽奖程序而发愁，今天大师兄就告诉大家一个好消息，一款由京东前端团队出品的抽奖组件开源了！！！
介绍
NutUI Bingo 是由京东 NutUI 前端团队出品的一款抽奖组件库，用于快速开发营销活动和小游戏场景的抽奖玩法。
使用了当下极为先进的Vue3与TypeScript和NutUI
特点
- 一共包含 12 种抽奖组件
- UI 设计基于京东 APP 10.0 视觉规范
- 官网提供详尽的文档和充足的代码示例
- 基于 Vue 3.0，也支持 TypeScript，支持按需引入
- 便捷灵活的自定义设置
包含12种常见的抽奖组件
- TurnTable 大转盘抽奖
- Marquee 跑马灯抽奖
- quareNine 九宫格抽奖
- ScratchCard 刮刮卡抽奖
- GiftBox 神秘大礼盒
- LottoRoll 摇奖机
- Hiteggs 砸金蛋
- GiftRain 红包雨
- LuckShake 摇一摇
- DollMachine 娃娃机
- ShakeDice 摇骰子
- GuessGift 你藏我猜
每个组件都可以自由的配置，支持设置奖品池、中奖奖品、自定义样式等，提供开始、结束等回调函数，还可以调整动画的时间、运转频率等。
使用方式
安装
代码语言：javascript复制npm i @nutui/nutui-bingo
引入
代码语言：javascript复制import { createApp } from "vue";
import App from "./App.vue";
import NutBig from "@nutui/nutui-bingo";
import "@nutui/nutui-bingo/dist/style.css";
createApp(App).use(NutBig).mount("#app");
快速开发一个抽奖转盘
代码语言：javascript复制// 引入组件
import { createApp } from 'vue';
import { Turntable } from '@nutui/nutui-bingo';
const app = createApp();
app.use(Turntable);
// 在页面中使用
<nutbig-turntable
class="turntable"
:prize-list="prizeList"
:turns-number="turnsNumber"
>
</nutbig-turntable>
官方文档有详细的api文档
https://nutui.jd.com/bingo/?from=thosefree.com#/
看完这些程序之后
写在最后
欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~
进群方式：在下方公众号后台，回复 111 ，按提示操作即可进群。
