公告（新版）元件

公告元件包含公告列表元件、置頂公告元件、置頂公告氣泡元件，三種元件皆採用相同的事件體系，因此僅需實例化一個公告 SDK，將實例傳遞給三種不同的公告元件使用。

• 公告列表元件提供列表展示、查看公告詳情的功能
• 置頂公告元件展示置頂類型公告
• 置頂公告氣泡元件是置頂公告的另一種展示類型，適用於直式觀看頁面

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

引入

線上檔案引入方式

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

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

使用方式

公告列表元件

公告列表元件內部基於 SDK 處理了大部分業務邏輯，但列表預設不顯示，接入方需透過呼叫相關介面對列表進行展示。

程式碼範例

以 PC 端接入為例：

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

置頂公告元件（不區分 PC 和行動端）

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

置頂公告氣泡元件（不區分 PC 和行動端）

<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

公告列表元件 Events

置頂公告元件 / 置頂公告氣泡元件 Events

show-detail-from-socket 事件參數說明

show-detail-from-socket 事件包含一個物件類型的事件參數，該物件具體欄位如下。

Methods