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

418天前 · 前端 · 145次阅读

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

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

关于 NutUI Bingo

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

nutui-bingo 官网nutui-bingo 官网

NutUI Bingo 抽奖组件技术特性

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

覆盖12种常见的抽奖组件

TurnTable大转盘抽奖Marquee跑马灯抽奖SquareNine九宫格抽奖ScratchCard刮刮卡抽奖GiftBox神秘大礼盒LottoRoll摇奖机Hiteggs砸金蛋GiftRain红包雨LuckShake摇一摇DollMachine娃娃机ShakeDice摇骰子GuessGift你藏我猜

12个抽奖组件12个抽奖组件

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

nutui-bingo 文档nutui-bingo 文档

开发上手体验

安装

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>

NutUI Bingo 适用场景

去年 618 我分享了一个抽奖组件 lucky canvas,简单好用。而 NutUI Bingo 是一个更为强大的移动端抽奖组件。

NutUI Bingo 主要用于 H5 场景,适用的业务场景很广,比如新注册的用户活动任务类的互动;日常促销,在结算完成商品后进行抽奖;逢年过节等推出的促销活动等等。

👍 0

web h5 javascript type-script vue3

最后修改于392天前

评论

贴吧 狗头 原神 小黄脸
收起

贴吧

狗头

原神

小黄脸

目录

avatar

noso_cool

我有一些...东西

944

文章数

2

评论数

6

分类