# 直播间内嵌抽奖气泡组件

## 介绍

> 采用vue远程组件（sfc）的方式，从cdn资源引入

### 使用示例

```
// index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://guangdianyun.oss-cn-hangzhou.aliyuncs.com/common/components/lotteryEntry/LotteryEntry.css">
</head>

<body>
  <div id="app"></div>
  <script type="text/javascript" src="https://guangdianyun.oss-cn-hangzhou.aliyuncs.com/common/components/lotteryEntry/LotteryEntry.umd.min.js">
</body>

</html>
```



```
// demo.vue

<template>
	<LotteryEntry></LotteryEntry>
</template>

<script>
  
export default {
  name: 'demo',
  components: {
    LotteryEntry: winodw.LotteryEntry
  }
}
</script>
```



### Props

| **参数**          | **说明**                | **类型**           | **默认值**         |
| ----------------- | ----------------------- | ------------------ | ------------------ |
| theme             | 主题                    | string             | dark，可选值 light |
| liveId            | 直播间id，必填          | string \|\| number | null               |
| userId            | 用户id                  | string \|\| number | null               |
| includeType       | 引用类型，必填          | string             | live               |
| retrieveApi       | 查询抽奖的api方法，必填 | function           | null               |
| zIndex            | 弹出气泡层级            | number             | 1000               |
| autoClose         | 打开后是否自动关闭      | boolean            | true               |
| autoCloseDuration | 打开后的显示时间        | Number             | 15000(ms)          |

### Events

| **事件名** | 说明                     | 回调参数                    |
| ---------- | ------------------------ | --------------------------- |
| openResult | 点击“查看中奖纪录”时触发 | value:api获取的抽奖信息对象 |
| onJoin     | 点击“立即参与”时触发     | value:api获取的抽奖信息对象 |

### Methods

| 方法名               | 参数/类型    | 用途                     |
| -------------------- | ------------ | ------------------------ |
| showPopover          | -            | 打开气泡                 |
| hidePopover          | -            | 关闭气泡                 |
| popoverUpdate        | -            | 更新气泡位置             |
| dmsListener          | data: object | 处理dms消息 控制数据更新 |
| popHandler（已弃用） | val：boolean | 控制气泡开关             |

