Vue3如何实现全屏模式

Posted 2022-09-02 BennuCTech

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，获取更多干货！