Announcement Component

This component is primarily used to display announcements made by roles such as instructors and administrators.

Before importing and using this functional component, you need to perform common configuration for the interactive function receiver SDK. For details, please refer to: Interactive Function Receiver UI Component - Configure SDK.

Import

Online File Import Method

// 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 Method via import (Recommended)

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

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

Code Example

After initializing the announcement SDK instance and integrating the announcement component, the component handles specific business logic internally. The integrator only needs to provide a container and toggle its visibility based on component events:

• When the instructor issues an announcement, the component triggers the to-show event, at which point the container can be displayed.
• When the instructor removes the announcement or the user clicks the confirmation button within the component, the to-hide event is triggered, allowing the container to be hidden.

Example for PC integration:

<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