实时互动-教育版屏蔽无关业务功能-界面定制-文档中心-腾讯云

说明：
阅读本章节前，请确保您已经了解 快速开始 的内容。为了帮助用户更专注，我们会精简课程页面的内容，以实现更优质的产品体验。隐藏部分功能模块是一种有效的策略，本章节将展示两个隐藏功能的示例。
示例一：CSS 文件屏蔽
1. 首先打开浏览器控制台，鼠标右键查看元素，查找我们希望屏蔽的元素。以图中元素为例。
﻿
﻿
2. 观察到有 js 在元素上修改样式，所以我们用如下代码写入 快速开始 里准备好的 test.css。
.videowrap-component-default {
  /**使用 !important 覆盖指定元素上的样式规则 **/
  display: none !important;
}
修改效果如下：
﻿
﻿
﻿
同样的方式可以用于屏蔽更多内容。
注意：
使用 CSS 强制覆盖前，建议仔细观察样式名称，避免屏蔽预期外的元素。
示例二：结合 js 临时屏蔽模块
在示例一中，可以看到我们有些业务组件有特殊名称。如图所示，这些特殊名称可以帮助我们快速定位业务组件位置。
﻿
﻿
﻿
假设我们希望在用户操作时自动隐藏某些组件，而在不操作时则显示这些组件。这时仅仅通过 CSS 无法实现，您可以在 快速开始 创建的test.js中粘贴以下代码来实现。
/**
 * 注入JS会在全局环境下找到TCIC对象
 * TCIC.SDK.instance 为SDK实例
 * TCIC.TMainState 为SDK状态枚举
 * Joined_Class 已加入课堂，此时组件都被加载可以使用
 * promiseState 表示当状态Joined_Class为true时，必定会执行一次
 */
TCIC.SDK.instance.promiseState(TCIC.TMainState.Joined_Class, true).then(() => {
  console.log("%c [customJS] willHide", "font-size:16px;color:red");
  /**
   * 这些是上图所示的组件名称
   */
  let hideList = ["header-component", "videowrap-component"];
  let timer = null;
  /**
   * 监听鼠标移动事件，用户移动鼠标就隐藏组件
   */
  document.body.addEventListener("mousemove", () => {
    hideList.forEach((item) => {
      TCIC.SDK.instance.getComponent(item).getVueInstance().hide();
    });
    clearTimeout(timer);
    /**
     * 用户停止移动鼠标1秒后，显示组件
     */
    timer = setTimeout(() => {
      hideList.forEach((item) => {
        TCIC.SDK.instance.getComponent(item).getVueInstance().show();
      });
      timer = null;
    }, 1000);
  });
});
其它文档
更多 SDK 方法请参考 TCIC-SDK API 文档。
屏蔽无关业务功能

本页目录：

示例一：CSS 文件屏蔽

示例二：结合 js 临时屏蔽模块

其它文档
