抽奖插件

NutUI Bingo - 基于 Vue 3.0 的移动端抽奖组件，由京东前端团队打造

京东出品的抽奖组件，12个常用抽奖场景，基于新的Vue3/ts技术构建。

关于 NutUI Bingo

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

NutUI Bingo 抽奖组件技术特性

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

覆盖12种常见的抽奖组件

1. TurnTable 大转盘抽奖
2. Marquee 跑马灯抽奖
3. SquareNine 九宫格抽奖
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>