vue切换全屏图标实现全屏screenfull效果，同时解决import screenfull出现缺少loader的问题

最新推荐文章于 2024-05-17 20:52:43 发布

晨洛溪月

最新推荐文章于 2024-05-17 20:52:43 发布

阅读量1.7k

点赞数 2

分类专栏：前端-原创文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_55728090/article/details/124664710

版权

本文介绍了如何在Vue项目中使用screenfull库实现全屏和退出全屏功能，解决了import screenfull时遇到的加载器缺失问题。通过降低screenfull版本并正确引入，成功实现全屏图标切换的效果。文中还提到了参考的相关博客资源。

摘要由CSDN通过智能技术生成

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(); // 全屏切换

记得引入

关注