# 公告组件

本组件主要用于展示讲师和管理员等角色发起的公告内容。

在引入及使用本功能组件前，需要先对互动功能接收端SDK进行公共配置，详情请查看：[互动功能接收端 UI 组件 - 配置 SDK](https://git.polyv.net/help-center/document-center/-/blob/master/live/js/new_sdk/interactions_receive_sdk/ui/default/overview/README.md#%E9%85%8D%E7%BD%AE-sdk)。

## 引入

#### 在线文件引入方式

```html
// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/PcAnnouncement/PcAnnouncement.umd.min.js"></script>
// PC端
<script>
    const Announcement = window.PolyvIRScene.PcAnnouncement.default;
</script>
```

```html
// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/MobileAnnouncement/MobileAnnouncement.umd.min.js"></script>
// 移动端
<script>
    const Announcement = window.PolyvIRScene.MobileAnnouncement.default;
</script>
```

#### import 方式引入（推荐）

```javascript
// PC 端
import Announcement from '@polyv/interactions-receive-sdk-ui-default/lib/PcAnnouncement';
```

```javascript
// 移动端
import Announcement from '@polyv/interactions-receive-sdk-ui-default/lib/MobileAnnouncement';
```

### 代码示例

初始化公告 SDK 实例，并接入公告组件后，公告组件内部会处理具体的业务逻辑，接入方只需要提供一个容器，根据组件事件切换显示状态即可：

* 当讲师下发公告时，组件将触发 `to-show` 事件，此时可以展示容器；
* 讲师移除公告或者用户点击组件内的按钮进行确认时，将触发 `to-hide` 事件，此时可以隐藏容器。

以 PC 端接入为例：

```vue
<template>
  <div v-show="isShowAnnouncement">
    <h2>公告</h2>
    <!-- 公告组件主体 -->
    <announcement
      :announcement-sdk="announcementSdk"
      @to-show="setAnnouncementVisible(true)"
      @to-hide="setAnnouncementVisible(false)"
    />
  </div>
</template>

<script>
import { Announcement as AnnouncementSDK } from '@polyv/interactions-receive-sdk';
import Announcement from '@polyv/interactions-receive-sdk-ui-default/lib/PcAnnouncement';

export default {
  components: {
    Announcement,
  },

  data() {
    return {
      // 公告SDK实例
      announcementSdk,
      // 是否显示公告
      isShowAnnouncement: false,
    };
  },

  created() {
    this.announcementSdk = new AnnouncementSDK();
  },

  beforeDestroy() {
    this.announcementSdk?.destroy();
  },

  methods: {
    setAnnouncementVisible(visible) {
      this.isShowAnnouncement = visible;
    },
  },
};
</script>
```

### Attributes

| 属性名             | 类型                    | 默认值       | 含义        |
| --------------- | --------------------- | --------- | --------- |
| lang            | string：'zh\_CN', 'en' | `'zh_CN'` | 语言        |
| announcementSdk | Object                | null      | 公告 SDK 实例 |

### Events

| 事件名     | 参数类型 | 参数含义 | 说明       |
| ------- | ---- | ---- | -------- |
| to-show | 无参数  | -    | 需要展示公告弹窗 |
| to-hide | 无参数  | -    | 需要隐藏公告弹窗 |
