说明:
示例一:CSS 文件屏蔽
1. 首先打开浏览器控制台,鼠标右键查看元素,查找我们希望屏蔽的元素。以图中元素为例。
2. 观察到有 js 在元素上修改样式,所以我们用如下代码写入 快速开始 里准备好的 test.css。
.videowrap-component-default {/**使用 !important 覆盖指定元素上的样式规则 **/display: none !important;}
修改效果如下:
同样的方式可以用于屏蔽更多内容。
注意:
使用 CSS 强制覆盖前,建议仔细观察样式名称,避免屏蔽预期外的元素。
示例二:结合 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);});});