1、安装 screenfull
npm install screenfull --save
安装之后,在需要实现全屏的vue文件中import,但是出现下面这个问题:
You may need an appropriate loader to handle this file type,currently no loaders are configured to process this file, See....
解决过程尝试安装一些缺少的style-loader、css-loader。但是本地的node版本已经是16了,担心版本配置不对问题,到时候会更麻烦。
然后尝试降低screenfull的版本:
npm i screenfull@5
然后再次重启,发现没问题了。
2、screenfull引入、属性和方法
import screenfull from "screenfull"; //需要实现全屏的文件引入即可
screenfull.isFullscreen; // 布尔值——当前页面是否全屏
screenfull.isEnabled; // 布尔值——当前浏览器是否支持全屏
screenfull.request(); // 全屏
screenfull.exit(); // 退出全屏
screenfull.toggle(); // 全屏切换
3、整页全屏、整页退出全屏【单个图标】
记得引入