快捷搜索:  汽车  科技

vue怎么设置隐藏状态?screenfull实现窗口全屏显示

vue怎么设置隐藏状态?screenfull实现窗口全屏显示screenfull只定义了5中常用的浏览器类型,所以screenfull并不是支持所有的浏览器全屏显示的,因此我们在切换前先检测下浏览器是否支持全屏显示功能,这里我们可以调用screenfull中的isEnabled属性。svg-icon组件定义可以参考Vue实战034:使用SVG图标详解更多Vue实战技巧可以参考我的专栏:Vue实战系列

全屏显示

就是把自己需要的窗口在显示器上最大化显示,跟我们在浏览器中按下键盘上的“F11”按键效果一样。在项目开发中通常就会有全屏功能的需求,在Vue中实现窗口全屏显示还是很简单的,可以利用screenfull组件来实现该功能。

vue怎么设置隐藏状态?screenfull实现窗口全屏显示(1)

​安装screenfull组件

在命令行中执行:npm install screenfull --save,在node_modules中可以看到screenfull文件夹,screenfull.js在screenfull对象中定义了request、exit、toggle、onchange、onerror、on、off等相应的方法。

vue怎么设置隐藏状态?screenfull实现窗口全屏显示(2)

​调用toggle方法

要实现全屏功能我们只要调用screenfull中的toggle方法,该方法通过判断isFullscreen属性来决定调用exit方法还是request方法。因此我们只要在使用的页面引用screenfull,然后通过click方法调用toggle方法就可以实现全屏功能了。

vue怎么设置隐藏状态?screenfull实现窗口全屏显示(3)

ICON图标切换

接着我们来完善下功能,添加图标切换功能,定义属性isFull为false默认非全屏显示,当点击全屏时切换icon图标示意可以点击退出全屏。

vue怎么设置隐藏状态?screenfull实现窗口全屏显示(4)

检测是否支持全屏

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

vue怎么设置隐藏状态?screenfull实现窗口全屏显示(5)

svg-icon组件定义可以参考Vue实战034:使用SVG图标详解

更多Vue实战技巧可以参考我的专栏:Vue实战系列

猜您喜欢: