check-in 簽到

一、介紹

簽到元件用於直播間的簽到功能，支援行動端、PC端和直式螢幕模式。元件包含簽到倒數計時、簽到狀態顯示、簽到記錄檢視等功能，支援強制簽到模式。

元件提供三種不同的入口元件：

• MobileCheckIn - 行動端簽到元件
• PcCheckIn - PC端簽到元件
• PortraitCheckIn - 直式螢幕簽到元件

二、引入

2.1 UMD 方式

其中 mobile-check-in.umd.js 是行動端簽到元件，pc-check-in.umd.js 是 PC 端簽到元件，portrait-check-in.umd.js 是直式螢幕簽到元件。

<script src="https://websdk.videocc.net/iar-check-in-ui/rc-20250612/mobile-check-in.umd.js"></script>

<script>
const { MobileCheckIn, PcCheckIn, PortraitCheckIn } = window.PolyvIarCheckInUi;
</script>

2.2 NPM 方式

// 安装依赖
pnpm add @polyv/iar-check-in-ui

// 引入组件
import { MobileCheckIn, PcCheckIn, PortraitCheckIn } from '@polyv/iar-check-in-ui';

三、程式碼範例

<template>
  <div>
    <!-- 移动端签到组件 -->
    <MobileCheckIn
      ref="checkInRef"
      :check-in-target="checkInSDK"
      enable-sound-effects
      check-in-record-enabled
      @show-entrance="onShowEntrance"
      @to-show="onToShow"
      @to-hide="onToHide"
      @check-in-status="onCheckInStatus"
    />
  </div>
</template>

<script setup>
import { MobileCheckIn } from '@polyv/iar-check-in-ui';
import { CheckIn } from '@polyv/iar-check-in-sdk';

// 初始化签到 SDK
const checkInSDK = new CheckIn(iarCore);

// 事件处理
const onShowEntrance = (show) => {
  console.log('显示入口:', show);
};

const onToShow = () => {
  console.log('显示签到弹窗');
};

const onToHide = () => {
  console.log('隐藏签到弹窗');
};

const onCheckInStatus = (status) => {
  console.log('签到状态:', status);
};
</script>

四、API

4.1 Props

4.2 Events

4.3 方法

透過 ref 可以呼叫元件的方法：