Announcement (New Version) Components

The Announcement components include the Announcement List component, Pinned Announcement component, and Pinned Announcement Bubble component. All three components use the same event system, so you only need to instantiate one Announcement SDK and pass the instance to the three different announcement components.

• The Announcement List component provides list display and announcement detail viewing functionality.
• The Pinned Announcement component displays pinned-type announcements.
• The Pinned Announcement Bubble component is another display type for pinned announcements, suitable for portrait viewing pages.

Before introducing and using these functional components, you need to perform common configuration for the Interactive Function Receiver SDK. For details, see: Interactive Function Receiver UI Components - Configure SDK.

Import

Online File Import Method

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

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

Import Method (Recommended)

// PC端
import Bulletin from '@polyv/interactions-receive-sdk-ui-default/lib/PcBulletin/index';

// 移动端
import Bulletin from '@polyv/interactions-receive-sdk-ui-default/lib/MobileBulletin/index';

Usage

Announcement List Component

The Announcement List component handles most of the business logic internally based on the SDK, but the list is hidden by default. The integrator needs to call the relevant APIs to display the list.

Code Example

Taking PC integration as an example:

<template>
  <div>
    <button type="button" @click="showBulletinList">打开公告列表</button>
    <div>
      <h1>{{ bulletinTitle }}</h1>
      <bulletin
        ref="bulletin"
        :lang="lang"
        :announcement-sdk="bulletinSdk"
        @title-change="onTitleChange"
      />
    </div>
  </div>
</template>

<script>
import { Announcement as BulletinSdk } from '@polyv/interactions-receive-sdk';
import Bulletin from '@polyv/interactions-receive-sdk-ui-default/lib/PcBulletin/index';

export default {
  components: {
    Bulletin,
  },

  data() {
    return {
      // 公告SDK实例
      bulletinSdk,
      // 是否展示公告
      isShowbulletin: false,
      // 外部弹窗（容器）标题
      bulletinTitle: '',
    };
  },

  created() {
    this.bulletinSdk = new BulletinSdk();
  },

  beforeDestroy() {
    this.bulletinSdk.destroy();
  },

  methods: {
    showBulletinList() {
      this.$refs.bulletin && this.$refs.bulletin.showBulletinList();
    },
    onTitleChange(title) {
      const titles = {
        list: '公告列表',
        detail: '公告',
      };
      this.bulletinTitle = titles[title] || titles.detail;
    },
  },
};
</script>

Pinned Announcement Component (Same for PC and Mobile)

<template>
  <bulletin-top
    class="plv-demo-pc-bulletin__top"
    :announcement-sdk="bulletinSdk"
    @show-top="onShowTop"
  />
</template>

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

export default {
  components: {
    BulletinTop,
  },

  data() {
    return {
      // 公告SDK实例
      bulletinSdk,
    };
  },

  created() {
    this.bulletinSdk = new BulletinSdk();
  },

  methods: {
    onShowTop() {
      // 可在此处处理自己的业务逻辑
    },
  },
};
</script>

Pinned Announcement Bubble Component (Same for PC and Mobile)

<template>
  <bulletin-bubble
    :announcement-sdk="announcementSdk"
    @show-bubble="onShowBubble"
  />
</template>

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

export default {
  components: {
    BulletinBubble,
  },

  data() {
    return {
      // 公告SDK实例
      bulletinSdk,
    };
  },

  created() {
    this.bulletinSdk = new BulletinSdk();
  },

  methods: {
    onShowBubble() {
      // 可在此处处理自己的业务逻辑
    },
  },
};
</script>

Attributes

Announcement List Component Events

Pinned Announcement Component / Pinned Announcement Bubble Component Events

show-detail-from-socket Event Parameter Description

The show-detail-from-socket event includes an object-type event parameter with the following fields.

Methods