摘要：

使用screenfull 插件

大多数开发项目中都需要全屏显示功能，在vue项目中有比较方便的插件 screenfull。npm地址：https://www.npmjs.com/package/screenfull

点击图标 全屏显示

再次点击退出全屏或者Esc 退出

使用方法 npm install screenfull --save

1. 首先安装 npm install screenfull --save
2. 在使用.vue文件中 引入 import screenfull from 'screenfull'
3. 在按钮方法中调用 screenfull.toggle()
4. 还可以检测全屏状态 screenfull.isFullscreen
5. 测试浏览器是否支持全screenfull screenfull.isEnabled

API

• .request(ele) 全屏
• .exit() 退出全屏
• .toggle() 切换全屏
• .on(event, function) ： event为 ‘change’ | ‘error’ 注册事件
• .off(event, function) ： 移除前面已经注册的事件
• .element： 返回一个全屏的dom节点，如果没有就为 null
• .isFullscreen : 是否是全屏状态
• .isEnabled ： 判断是否支持全屏

兼容性

• Note: In order to use this package in Internet Explorer, you need a Promise polyfill.
• Note: Safari is supported on desktop and iPad, but not on iPhone. This is a limitation in the browser, not in Screenfull.

 原文链接：VUE项目实现全屏显示功能---screenfull - 程序员大本营