京东开源了十二个抽奖组件！！！

大家好,我是前端实验室的大师兄！

不知道大家有没有在手机上抽过奖呢？又不知道大家有没有做过抽奖小程序呢？

想当年大师兄刚入行的时候，领导分配的第一个任务就是做一个九宫格抽奖程序，不仅要求中奖概率还要求中奖范围，更重要的是不能有人中奖！！！当时的痛苦场景大师兄还历历在目，写的头都大了

为了不让前端同行们再为抽奖程序而发愁，今天大师兄就告诉大家一个好消息，一款由京东前端团队出品的抽奖组件开源了！！！

介绍

NutUI Bingo 是由京东 NutUI 前端团队出品的一款抽奖组件库，用于快速开发营销活动和小游戏场景的抽奖玩法。

使用了当下极为先进的Vue3与TypeScript和NutUI

特点

• 一共包含 12 种抽奖组件
• UI 设计基于京东 APP 10.0 视觉规范
• 官网提供详尽的文档和充足的代码示例
• 基于 Vue 3.0，也支持 TypeScript，支持按需引入
• 便捷灵活的自定义设置

包含12种常见的抽奖组件

1. TurnTable 大转盘抽奖
2. Marquee 跑马灯抽奖
3. quareNine 九宫格抽奖
4. ScratchCard 刮刮卡抽奖
5. GiftBox 神秘大礼盒
6. LottoRoll 摇奖机
7. Hiteggs 砸金蛋
8. GiftRain 红包雨
9. LuckShake 摇一摇
10. DollMachine 娃娃机
11. ShakeDice 摇骰子
12. GuessGift 你藏我猜

每个组件都可以自由的配置，支持设置奖品池、中奖奖品、自定义样式等，提供开始、结束等回调函数，还可以调整动画的时间、运转频率等。

使用方式

安装

npm i @nutui/nutui-bingo

引入

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");

快速开发一个抽奖转盘

// 引入组件
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 ，按提示操作即可进群。