Feedback Component

This document primarily describes how to integrate the feedback component on the interactive feature receiving end. After integration, the audience can submit feedback.

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

Import

Online File Import Method

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

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

Import Method (Recommended)

// PC 端
import FeedBack from '@polyv/interactions-receive-sdk-ui-default/lib/PcFeedBack';   

// 移动端
import FeedBack from '@polyv/interactions-receive-sdk-ui-default/lib/MobileFeedBack';  

Code Example

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

Taking PC integration as an example:

<template>
  <!-- modal是一个弹窗组件，可根据界面风格自行设计-->
  <modal
      no-bg
      draggable
      title="投诉反馈"
      :visible="visible"
      :close-on-click-modal="false"
      @close="visible = false"
  >
    <feed-back
      :feed-back-sdk="feedBackSdk"
      :is-show-feed-back="visible"
      @to-show="onSetFeedBackVisible(true)"
      @to-hide="onSetFeedBackVisible(false)"
    />
  </modal>
</template>

<script>
import { FeedBack as FeedBackSDK } from '@polyv/interactions-receive-sdk';
import FeedBack from '@polyv/interactions-receive-sdk-ui-default/lib/PcFeedBack';   

export default {
  components: {
    FeedBack,
  },

  data() {
    return {
      // 反馈 SDK 实例
      feedBackSdk: null,
      visible: false,
    };
  },

  created() {
    this.feedBackSdk = new FeedBackSDK();
  },

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

  methods: {
    onSetFeedBackVisible(visible) {
      this.visible = visible;
    },
  },
};
</script>

Attributes

Events