Interactive Feature Initiator UI Components

Updated: 2022-03-23 17:51:23

Overview

This project provides UI components for the initiator side (broadcast and management ends) of Polyv's live interactive features. Built with Vue.js 2.6.x, developers can use these components directly or customize them for secondary development.

If you are using other frameworks such as React or Angular, please refer to the component source code and SDK documentation to implement the corresponding interfaces yourself.

Note that some features are presented as modals in the UI design drafts. However, this component only provides the main content section. You will need to implement the outer modal (or present it in another form) and control visibility based on the corresponding component events.

Usage Documentation

Installation

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

Importing SDK and Components

// 引入 @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';

Importing Other Dependencies

The interactive feature initiator UI components depend on some components from Element UI (2.x). You can choose to import Element UI fully or on demand.

Below is the content to add in main.js for on-demand imports:

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

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

Configuring the SDK

Please refer to the "Usage Instructions" in the Interactive Feature Initiator SDK.

Load the components after the SDK initialization is complete.

Components

Below are reference documentation links for each feature.

Version Updates

None