Vue3如何实现全屏模式
screenfull
首先安装screenfull插件
pnpm install --save screenfull
使用
然后引入
import screenfull from "screenfull";
然后就可以通过screenfull.toggle()来切换全屏模式了。
注意这个toggle操作必须由用户触发，否则不会生效，所以必须有一个按钮让用户来交互。
一般在使用screenfull.toggle()可以通过screenfull.isEnabled来判断当前浏览器是否支持全屏。
全屏状态
如果我们需要知道全屏的状态来改变一些组件，比如全屏按钮状态的切换。这时候可以用screenfull.isFullscreen来判断当前是否是全屏状态。
另外可以通过screenfull.onchange(callback)来注册一个监听，当切换全屏或退出全屏的时候就会触发。
onchange(callback)实际上是on('change', callback)的别名，所以直接用on('change', callback)也可以注册状态监听。
用off('change', callback)来注销监听。
Api
最后来看看screenfull的Api：
toggle：切换全屏模式，如果全屏则退出isEnabled：判断浏览器是否支持全屏isFullscreen：判断是否处于全屏状态；exit：退出全屏；on：注册监听，有两种监听"change"和"error"，change可以监听全屏切换；off：注销监听；onchange：相当于on('change', callback)；onerror：相当于on('error', callback)；
关注公众号：BennuCTech，获取更多干货！