公告（新版）组件

公告组件包含公告列表组件、置顶公告组件、置顶公告气泡组件，三种组件都采用同样的事件体系，所以仅需要实例化一个公告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

属性名	类型	默认值	含义
announcementSdk	Object	null	公告 SDK 实例
lang	string：'zh_CN', 'en'	'zh_CN'	语言
cacheReadedEnabled	Boolean	true	是否去除公告强提醒(已读保存storage)

公告列表组件Events

事件名	参数类型	参数含义	说明
title-change	String或Undefined	`'list'	'detail'`，表示当前显示的是列表还是公告详情
look-over	-	-	点击列表中某条公告时触发
show-detail-from-socket	Object	公告数据	当接收到新的弹窗公告消息时触发，表示需要弹窗展示该公告消息
show-list	-	-	当从新接收到的公告返回列表时触发
hide	-	-	触发条件：1、查看新收到的公告消息并继续收到新的置顶或弹窗公告时；2、查看新收到的公告消息并点击关闭按钮时；3、查看新收到的公告消息并收到删除当前公告消息时

置顶公告组件/置顶公告气泡组件Events

事件名	参数类型	参数含义	说明
show-top	Object	公告数据（详见show-detail-from-socket 事件参数说明）	接收到新的置顶公告时触发
show-bubble	Object	公告数据（详见show-detail-from-socket 事件参数说明）	接收到新的置顶公告时触发

show-detail-from-socket 事件参数说明

show-detail-from-socket 事件包含一个对象类型的事件参数，该对象具体字段如下。

属性名	类型	含义
content	String	公告内容
createTime	Nummber	公告创建时间
id	Number	公告ID
isPop	Number	是否弹窗公告，1表示是弹窗公告，0表示不是弹窗公告
isTop	Number	是否置顶公告，1表示是置顶公告，0表示不是置顶公告
nick	String	发布公告者昵称
pic	String	发布公告者头像
userId	String	发布公告者ID
roomId	String	房间ID

Methods

方法名	参数	说明
showBulletinList	无参数	展示公告列表
markAnnounceReaded	无参数	标记已读，下次收到同个公告不弹出

---