本文主要是介绍前端JS必用工具【js-tool-big-box】学习,打开全屏和关闭全屏,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
这一小节,我们说一下 js-tool-big-box 工具库中,打开全屏和关闭全屏的方法学习。
我们知道,浏览器想打开全屏,按一下 F11 键就可以了,但一来这个功能不一定所有使用的用户都知道,二来在一些例如大屏的需求场景下,还是很被需要的。很多用户一旦投屏展示后,他那个大屏幕就在那里给用户展示着,或者给老板展示着,但是那个大屏幕呢,人家没有 F11 这个键。所以,打开全屏功能就很重要了。
1 安装js-tool-big-box工具包
执行安装命令
npm i js-tool-big-box
在项目中引入 browserBox 对象,打开和关闭全屏的公共方法被放到了这个对象内
import { browserBox } from 'js-tool-big-box';
2 在项目中预备2个按钮
我们随便打开一个项目,vue的就行,然后预备2个按钮,用于方法测试
<div class="center"><el-button @click="handleFullScreen(true)">开启全屏</el-button><el-button @click="handleFullScreen(false)">关闭全屏</el-button>
</div>
3 方法调用
methods: {handleFullScreen(fullSwitch) {browserBox.fullScreen(fullSwitch);}
}
我们上面便于测试,放了两个按钮,一个是“打开全屏”,一个是“关闭全屏”。这2个按钮都可以调用同一个方法 browserBox.fullScreen 来实现全屏的打开和关闭。但现实业务场景中,肯定是一个按钮,用户先点击“打开全屏”的操作,然后按钮应该紧接着变为“关闭全屏”。而非像本文说的这样,准备2个按钮。
4 使用方法总结
方法名 | 返回值 | 入参 |
fullScreen | 无 | 第一个参数必填,如果需要全屏,传true;如果需要关闭全屏,传false |
这篇关于前端JS必用工具【js-tool-big-box】学习,打开全屏和关闭全屏的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!