反馈组件
本文档主要描述如何接入互动功能接收端的反馈组件,接入后可实现观众端提交反馈。
在引入及使用本功能组件前,需要先对互动功能接收端SDK进行公共配置,详情请查看:互动功能接收端 UI 组件 - 配置 SDK。
引入
在线文件引入方式
// 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 方式引入(推荐)
// PC 端
import FeedBack from '@polyv/interactions-receive-sdk-ui-default/lib/PcFeedBack';
// 移动端
import FeedBack from '@polyv/interactions-receive-sdk-ui-default/lib/MobileFeedBack';
代码示例
先实例化SDK,然后将其传入到组件中,以便内部进行相应逻辑处理。
以 PC 端接入为例:
<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
属性名
类型
默认值
含义
checkInSdk
Object
null
签到 SDK 实例
lang
string:'zh_CN', 'en'
'zh_CN'
语言
is-show-feed-back
boolean
false
是否显示反馈组件(重置状态)
Events
事件名
参数类型
参数含义
说明
to-show
无参数
-
需要展示签到弹窗
to-hide
无参数
-
需要隐藏签到弹窗
Last updated
Was this helpful?