全屏显示
就是把自己需要的窗口在显示器上最大化显示,跟我们在浏览器中按下键盘上的“F11”按键效果一样。在项目开发中通常就会有全屏功能的需求,在Vue中实现窗口全屏显示还是很简单的,可以利用screenfull组件来实现该功能。
![991b45b6b0f248ba69a5a06bc13b81ed.gif](https://img-blog.csdnimg.cn/img_convert/991b45b6b0f248ba69a5a06bc13b81ed.gif)
安装screenfull组件
在命令行中执行:npm install screenfull --save,在node_modules中可以看到screenfull文件夹,screenfull.js在screenfull对象中定义了request、exit、toggle、onchange、onerror、on、off等相应的方法。
![63d3db274048697f72fa20d776c86e7b.png](https://img-blog.csdnimg.cn/img_convert/63d3db274048697f72fa20d776c86e7b.png)
调用toggle方法
要实现全屏功能我们只要调用screenfull中的toggle方法,该方法通过判断isFullscreen属性来决定调用exit方法还是request方法。因此我们只要在使用的页面引用screenfull,然后通过click方法调用toggle方法就可以实现全屏功能了。