前言—
NutUI-Bingo 是由 NutUI 前端團隊基於 Vue 3.0 打造的移動端組件庫，適用於營銷活動和小遊戲場景的抽獎組件庫。
源碼搶先看：https://github.com/jdf2e/nutui-bingo
bingo 首頁：https://nutui.jd.com/bingo
組件體驗
開發背景—
隨着業務需求的迭代更新，營銷場景也越來越豐富，很多產品通過設定的一些玩法來與用戶交流，增加用戶的粘性，提高用戶的轉化率。比如新註冊的用戶，在新人專區會有類似的活動任務類的互動；日常促銷，在結算完成商品後進行抽獎；逢年過節等推出的促銷活動...諸如此類場景下都需要與用戶“交流”。
爲豐富這種場景的需求，讓用戶玩的更“有意思”，我們將營銷場景的案列及玩法進行梳理分析。業務發展豐富了我們的技術和組件，我們也對業務進行反哺，於是整合了一套覆蓋大多數場景的抽獎組件庫 — NutUI-Bingo。
開發設計—
我們本着提效的理念進行開發，希望能夠覆蓋更多的場景需求，技術上能與時俱進。所以我們的架構與 NutUI 保持一致，並沿用其腳手架。
我們對組件優先進行 Vue3 版本的開發，保證組件穩定的情況下逐漸適配微信小程序，保證組件的兼容適配，現階段我們規劃並開發了 12 個組件。
每個組件用戶可進行更自由的配置，可設置獎品池、中獎獎品、自定義樣式等，提供開始、結束等回調函數，當然也包括一些動畫的時間、運轉頻率等。
我們儘可能詳細地介紹組件的使用說明，包括組件的引入方法，組件支持的 api 等。爲了更直觀的介紹組件使用方法以及效果，每個組件我們都提供了簡單實現的 demo，讓開發者能更快速的使用組件的各項功能。
輕鬆上手—
bingo 組件的使用與其他組件庫的使用方式一樣，可以使用 npm 或者 yarn 的形式安裝。
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 App from "./App.vue";
import { Turntable } from "@nutui/nutui-bingo";
import "@nutui/nutui-bingo/dist/style.css";
createApp(App).use(Turntable).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>
其中 prize-list 是我們的獎品列表，以數組的形式進行配置；turns-number 是設置我們的轉盤要滾動多少圈停止，還有 turns-time 滾動時間的設置，兩者可結合使用。
const prizeList = ref([
{
id: 'xxx',
prizeName: 'xxxx',
prizeImg: '圖片鏈接'
},
]);
翻翻翻~~
翻牌抽獎也是比較常見的玩法，可以配置獎品名稱，獎品圖片，翻牌背景圖片等，還支持開發者自定義設置用戶是否中獎，提供翻牌點擊事件，以及用戶點擊中間開始和返回事件，比如中獎 prize-id 的設置。
猜猜猜~~
傳統戲法“三仙歸洞”，大家並不陌生，今天我們也可以表演一番了。
我們也可以神不知鬼不覺的移形換位，turns-number 靈活調整交換次數，也可以控制碗的移動速度 turns-frequency，設置中獎位置也是必須的 prize-index，同時開始、結束回調也可做響應的邏輯處理。
現在，你是不是想要了解更多的組件玩法，還在等什麼，快來試試吧 👉 https://nutui.jd.com/bingo/
我們的價值—
效率提升
相對這種場景下的需求開發是比較快的，能夠降低開發成本，我們爲大家提供了開箱即用的組件和功能，如果覺得不符合你的業務需求，可以向我們提出你的建議，或者加入我們一起開發。
新技術
我們使用 Vue3 技術棧進行組件庫開發，保證開發者的技術不掉隊，我們緊跟技術發展的方向，目前組件庫使用的 Vue3 開發，vite 構建工具，開發效率大幅提升。
技術支持
如果我們的組件庫沒有你想要的哪一款，那可以向我們建議並提出你的設計想法，我們會根據情況爲你開發一款或大家共建。
未來展望—
NutUI-Bingo 組件庫的內容會不斷的迭代更新，豐富更多的玩法。同時我們會逐步的適配小程序開發，讓大家能夠兼容更多的場景。
NutUI-Bingo 致力打造一套成熟豐富抽獎組件庫，配備良好的技術服務和靈活的可擴展能力，期待您的使用與反饋，如您喜歡， 來點個 Star ❤️ 支持我們一下吧 ~
Github: https://github.com/jdf2e/nutui-bingo
本文分享自微信公衆號 - 凹凸實驗室（AOTULabs）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。