注意：说明：
注意：阅读这篇前，请确保你已经了解 快速开始定制 的内容。
一、示例一：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 文档。