全屏显示
就是把自己需要的窗口在显示器上最大化显示，跟我们在浏览器中按下键盘上的“F11”按键效果一样。在项目开发中通常就会有全屏功能的需求，在Vue中实现窗口全屏显示还是很简单的，可以利用screenfull组件来实现该功能。
安装screenfull组件
在命令行中执行：npm install screenfull --save，在node_modules中可以看到screenfull文件夹，screenfull.js在screenfull对象中定义了request、exit、toggle、onchange、onerror、on、off等相应的方法。
调用toggle方法
要实现全屏功能我们只要调用screenfull中的toggle方法，该方法通过判断isFullscreen属性来决定调用exit方法还是request方法。因此我们只要在使用的页面引用screenfull，然后通过click方法调用toggle方法就可以实现全屏功能了。
ICON图标切换
接着我们来完善下功能，添加图标切换功能，定义属性isFull为false默认非全屏显示，当点击全屏时切换icon图标示意可以点击退出全屏。
检测是否支持全屏
screenfull只定义了5中常用的浏览器类型，所以screenfull并不是支持所有的浏览器全屏显示的，因此我们在切换前先检测下浏览器是否支持全屏显示功能，这里我们可以调用screenfull中的isEnabled属性。
svg-icon组件定义可以参考Vue实战034：使用SVG图标详解
相关推荐
-
vue图片预览插件（vue-photo-preview）
今天给小伙伴们分享一个优秀的vue.js图片预览组件VuePhotoPreview。 vue-photo-preview 基于 PhotoSwipe 的 Vue 图片预览组件。超流畅的预览效果、完美支持pc及移动端适配。 安装 $ npm i vue-photo-preview -S 引入...
-
Vue注册全局组件（Vue组件注册）
组件是 vue最强大的功能之一，在项目中我们经常会用到很多可复用的代码块，通过封装可重用的代码不仅提高了组件的可重用性，而且每个 Vue 组件都是Vue的实例，可接受相同的选项对象并提供相同的生命周期钩子。 这就...
-
大厂前端项目开发流程（前端项目实战案例）
前言 前天有幸看了尤雨溪 、月影、 郭辉、屈光宇 几位大佬的 《畅聊 Vue 3.0 & 前端技术新趋势》，属实 vue3 生态周边大全 的一波好家伙给震撼到了； 虽然我看直播中说的最多的是 别更新了，学不动了 , 但是身为...
-
vue实现数据绑定（vue绑定数据的两种方式）
一、实例与数据 Vue.js 应用的创建很简单，通过构造函数 Vue 就可以创建一个 Vue 的根实例，并启动 Vue 应用： var app = new Vue ({ //选项 }) 变量 app 就代表了这个 Vue 实例。事实上，几乎所有的代码都是一个对...
-
vue开发可视化编辑器可拖拽（vue可视化拖拽组件模板）
推荐：Vue可视化拖拽编辑工具基于 vue 可视化拖拽编辑，页面生成工具。提升前端开发效率，可集成至移动端项目作为通过定义 JSON 直接生成 UI 界面。安装部署npm install （安装 node_modules 模块）yarn upgrade (用...
-
手机视频剪辑app哪个好（哪个app视频剪辑好）
创作立场声明：视频剪辑哪家强，库玛老师帮你忙！ 作为一个带引号的摄影师，我一向瞧不上手机拍摄和剪辑，但是同样不否认现在的手机剪辑类APP功能的强大。在一些细节上做的有点糙，但是要知道也不是每个网友都是列文...