公告元件

本元件主要用於展示講師和管理員等角色發起的公告內容。

在引入及使用本功能元件前，需要先對互動功能接收端 SDK 進行公共配置，詳情請查看：互動功能接收端 UI 元件 - 配置 SDK。

引入

線上檔案引入方式

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

// 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 方式引入（推薦）

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

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

程式碼範例

初始化公告 SDK 實例，並接入公告元件後，公告元件內部會處理具體的業務邏輯，接入方只需要提供一個容器，根據元件事件切換顯示狀態即可：

• 當講師下發公告時，元件將觸發 to-show 事件，此時可以展示容器；
• 講師移除公告或用戶點擊元件內的按鈕進行確認時，將觸發 to-hide 事件，此時可以隱藏容器。

以 PC 端接入為例：

<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

Events