Vue工程页面全屏工具介绍和使用

vue项目中，页面的全屏工具screenfull

一、下载以及本地安装

cnpm install screenfull --save

二、常见使用问题

1、安装后使用报错异常

You may need an appropriate loader to handle this file type,currently no loaders are configured to process this file, See....

这个网上有解决方案，但是比较麻烦，需要修改css-loader等加载器，这时候可以看下如果下载的screenfull是6.XX版本的，建议尝试下载5.xx版本的，可以简单解决这个问题。

cnpm install screenfull@5 --save

三、screenfull引入以及常用属性

需要全屏的页面中引入screenfull工具

import screenfull from "screenfull";    //需要实现全屏的文件引入即可
screenfull.isFullscreen; // 布尔值——当前页面是否全屏
screenfull.isEnabled; // 布尔值——当前浏览器是否支持全屏
screenfull.request(); // 全屏
screenfull.exit(); // 退出全屏
screenfull.toggle(); // 全屏切换

四、设计全屏控制按钮

主要就是主DIV设置position属性为relative，全屏工具开关按钮div的position属性为absolute。