问答组件

本文档主要描述如何接入互动功能接收端的问答组件，接入后可实现观众端显示问答功能。

在引入及使用本功能组件前，需要先对互动功能接收端SDK进行公共配置，详情请查看：互动功能接收端 UI 组件 - 配置 SDK。

引入

在线文件引入方式

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

import 方式引入（推荐）

import MobileQuestionAnswer from '@polyv/interactions-receive-sdk-ui-default/lib/MobileQuestionAnswer';

代码示例

先实例化问答SDK，然后将其传入到组件中，以便内部进行相应逻辑处理。

以 mobile 端接入为例：

<template>
  <div class="plv-demo-question-answer">
    <mobile-question-answer
      :lang="lang"
      :question-answer-sdk="questionAnswerSdk"
      :has-nick="hasNick"
      @preview="preview"
      @news="onNews"
      @set-nick="setNick"
  	/>
  </div>
</template>

<script>
import { QuestionAnswer } from '@polyv/interactions-receive-sdk';
import MobileQuestionAnswer from '@polyv/interactions-receive-sdk-ui-default/lib/MobileQuestionAnswer';

export default {
  components: {
    MobileQuestionAnswer,
  },

  props: {
    lang: {
      type: String,
      default: 'zh_CN',
    }
  },

  data() {
    return {
      // SDK 实例
      questionAnswerSdk: null,
      hasNick: true
    };
  },

  mounted() {
    this.questionAnswerSdk = new QuestionAnswer();
  },

  beforeDestroy() {
    this.questionAnswerSdk?.destroy();
  },

  methods: {
    preview({ url }) {
      // TODO 实现大图预览问答图片
    },
    onNews() {
      // TODO 收到新的问答消息，实现小红点提示
    },
    setNick() {
      // TODO 未设置昵称，需提醒设置昵称后， this.hasNick = true;
    }
  }
};
</script>
<style>
 /** 问答UI组件外层父元素样式示列 **/
.plv-demo-question-answer {
  width: auto;
  position: relative;
  height: 400px;
  overflow: auto;
}
</style>

Attributes

属性名	类型	默认值	含义
lang	string：'zh_CN', 'en'	'zh_CN'	语言
questionAnswerSdk	Object	null	问答 SDK 实例
hasNick	Boolean	true	是否有设置昵称

Events

事件名	参数类型	参数含义	说明
news	Number	返回新消息条数	收到新消息
preview	Object	图片地址	点击图片后，用于放大预览
set-nick	-	-	当hasNick 为false时，点击问答输入框，需提示设置昵称