問答元件

本文件主要說明如何接入互動功能接收端的問答元件，接入後可實現觀眾端顯示問答功能。

在引入及使用本功能元件前，需要先對互動功能接收端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

Events