互動功能發起端 UI 元件

概述

本專案是保利威直播互動功能發起端（開播端及管理端等）的 UI 元件，基於 Vue.js 2.6.x 編寫，開發人員可以直接使用本元件或基於本元件進行二次開發。

如果您使用的是 React、Angular 等其他框架，可以參照本元件原始碼和 SDK 文件自行實作對應的介面。

注意，部分功能在 UI 設計稿中是以模態框（Modal）形式呈現的，但本元件僅提供主體內容部分，請自行實作外層模態框（或以其他形式展現），並根據對應元件的事件去控制可見性。

使用文件

安裝

npm i @polyv/interactions-launch-sdk @polyv/interactions-launch-sdk-ui-default

引入 SDK 與元件

// 引入 @polyv/interactions-launch-sdk
import * as InteractionsLaunchSDK from '@polyv/interactions-launch-sdk';
// 按需引入组件
import CheckIn from '@polyv/interactions-launch-sdk-ui-default/lib/CheckIn';
import AnswerCard from '@polyv/interactions-launch-sdk-ui-default/lib/AnswerCard';
import Timer from '@polyv/interactions-launch-sdk-ui-default/lib/Timer';

引入其他依賴

互動功能發起端 UI 元件依賴於 Element UI (2.x) 的部分元件，可以選擇完整引入或按需引入 Element UI。

以下是在按需引入時需要在 main.js 中增加的內容：

// 使用签到组件、抽奖组件时，需要额外引入 element-ui 的 DatePicker 组件。
import { DatePicker } from 'element-ui';
// 使用抽奖组件时，需要额外引入 element-ui 的 button 样式文件。
import 'element-ui/lib/theme-chalk/button.css';

// 注册组件
Vue.use(DatePicker);

配置 SDK

請參考互動功能發起端 SDK中的「使用說明」。

在 SDK 初始化完畢後，再載入元件。

元件

此處僅提供各功能參考文件連結。

• AnswerCard 答題卡：參考文件
• CheckIn 簽到：參考文件
• Timer 計時器：參考文件
• Lottery 抽獎：參考文件
• Notice 公告：參考文件
• Questionnaire 問卷：參考文件
• RunAnswer 搶答：參考文件

版本更新

暫無