2024年前端最新vue3使用screenfull实现全屏(1)，2024年最新Web前端面试复习重点

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

npm地址：https://www.npmjs.com/package/screenfull

使用方法

---

1. 安装

npm install screenfull --save

2. 在使用.vue文件中 引入

import screenfull from ‘screenfull’

3. 在按钮方法中调用方法可以双向切换全屏与非全屏

screenfull.toggle()

还可以

• 检测全屏状态

screenfull.isFullscreen

• 测试浏览器是否支持全screenfull

screenfull.isEnabled

API

---

screenfull 插件常用方法：

• .request(ele) 全屏

• .exit() 退出全屏

• .toggle() 切换全屏

• .on(event, function) ： event为 ‘change’ | ‘error’ 注册事件

• .off(event, function) ： 移除前面已经注册的事件

• .element： 返回一个全屏的dom节点，如果没有就为 null

• .isFullscreen : 是否是全屏状态

• .isEnabled ： 判断是否支持全屏

示例

============================================================

安装screenfull

---

cnpm install --save screenfull

页面使用

对象篇

模块化编程-自研模块加载器

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

WQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LTQ5MGM2MTlhOTI5YjY3Y2U?x-oss-process=image/format,png)