本文主要是介绍前端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】学习，打开全屏和关闭全屏的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
