vue 全屏 页面，screenfull退出全屏

全屏显示是指将自己需要的窗口最大化显示在显示器上，其效果与在浏览器中按键盘上的“F11”键相同。 项目开发中通常有全屏功能的需求，但是用Vue实现窗口的全屏显示很简单，可以利用screenfull组件来实现这个功能。

screenfull组件的安装将在命令行中执行。 npm install screenfull --save，node_modules显示screenfull文件夹，screenfull.js在screenfull对象中定义request，exull

要实现调用toggle方法的全屏功能，只需调用screenfull的toggle方法，该方法确定isFullscreen属性并确定是调用exit方法还是request方法。 因此，只需在您的页面中浏览screenfull并从click方法中调用toggle方法，就可以实现全屏显示功能。

ICON图标切换接下来，我们将进一步完善功能，添加图标切换功能，将属性isFull定义为false的默认非全屏显示，表示单击全屏可以切换ICON图标并退出全屏。

检测是否支持全屏的screenfull在5中只定义了常用的浏览器类型，所以screenfull并不支持所有浏览器的全屏显示，所以在切换之前浏览器是否支持全屏显示功能在这里可以调用screenfull的isEnabled属性。

可以使用Vue实战034:SVG图标详细调查svg-icon组件的定义

更多Vue实战技巧请参考我的专栏： Vue实战系列

• 上一篇：咸鱼之王每日特惠60块礼包值得买吗，steam官网
• 下一篇：苹果6更新ios12，ios15 beta6更新了什么