前端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  使用方法总结

------------------------------------------

这是git仓库地址：js-tool-big-box仓库地址