Q&A Component

This document describes how to integrate the Q&A component on the receiving end of the interactive feature. After integration, the audience can view the Q&A functionality.

Before introducing and using this component, you need to perform common configuration for the interactive feature receiving end SDK. For details, see: Interactive Feature Receiving End UI Component - Configuring the SDK.

Import

Online File Import Method

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

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

Code Example

First, instantiate the Q&A SDK, then pass it into the component for internal logic processing.

Taking mobile integration as an example:

<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

Events