lottery

1. Introduction

The lottery component is used for the live streaming room's lottery functionality, supporting multiple lottery types and scenarios. The component includes complete lottery process features such as lottery details, lottery results, winning records, and prize claiming.

The component provides multiple different entry components:

• LotteryDetail - Lottery details component
• LotteryResult - Lottery results component
• LotteryRecord - Winning records component
• LotteryReceive - Prize claiming component
• LotteryPendant - Lottery widget component
• LotteryDialog - Lottery popup component
• LotteryAnimation - Lottery animation component
• LotteryAnswerQuestion - Quiz lottery component
• LotteryWinners - Winner list component

2. Import

2.1 UMD Method

<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 Method

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

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

3. Code Example

<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>

4. API

4.1 Props

4.2 Events

4.3 Methods

Component methods can be called via ref: