lottery 抽獎

一、介紹

抽獎元件用於直播間的抽獎功能，支援多種抽獎類型和場景。元件包含抽獎詳情、抽獎結果、中獎記錄、獎品領取等完整的抽獎流程功能。

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

• LotteryDetail - 抽獎詳情元件
• LotteryResult - 抽獎結果元件
• LotteryRecord - 中獎記錄元件
• LotteryReceive - 獎品領取元件
• LotteryPendant - 抽獎掛件元件
• LotteryDialog - 抽獎彈窗元件
• LotteryAnimation - 抽獎動畫元件
• LotteryAnswerQuestion - 答題抽獎元件
• LotteryWinners - 中獎名單元件

二、引入

2.1 UMD 方式

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

<script>
const { LotteryDetail, LotteryResult, LotteryRecord, LotteryReceive } = window.PolyvIarLotteryUi;
</script>

2.2 NPM 方式

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

// 引入组件
import {
  LotteryDetail,
  LotteryResult,
  LotteryRecord,
  LotteryReceive,
  LotteryPendant,
  LotteryDialog
} from '@polyv/iar-lottery-ui';

三、程式碼範例

<template>
  <div>
    <!-- 抽奖详情 -->
    <LotteryDetail
      ref="lotteryDetailRef"
      :lottery-target="lotterySDK"
      :lottery-config="lotteryConfig"
      @to-show="onToShow"
      @to-hide="onToHide"
    />

    <!-- 抽奖结果 -->
    <LotteryResult
      ref="lotteryResultRef"
      :lottery-target="lotterySDK"
      :lottery-config="lotteryConfig"
      @to-show="onToShow"
      @to-hide="onToHide"
    />
  </div>
</template>

<script setup>
import { LotteryDetail, LotteryResult } from '@polyv/iar-lottery-ui';
import { Lottery } from '@polyv/iar-lottery-sdk';

// 初始化抽奖 SDK
const lotterySDK = new Lottery(iarCore);

// 抽奖配置
const lotteryConfig = {
  enableSoundEffects: true,
  showParticipants: true
};

// 事件处理
const onToShow = () => {
  console.log('显示抽奖弹窗');
};

const onToHide = () => {
  console.log('隐藏抽奖弹窗');
};
</script>

四、API

4.1 Props

4.2 Events

4.3 方法

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