使用screenfull插件报错问题

最新推荐文章于 2024-05-14 11:01:36 发布
最新推荐文章于 2024-05-14 11:01:36 发布
阅读量2.5k 收藏 3
点赞数 1
分类专栏： bug 文章标签： npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47979372/article/details/124071471
版权

screenfull 全屏 bug修复 版本降级 导入路径
关键词由CSDN通过智能技术生成

我们实现全屏功能可以直接手写方法，但利用screenfull插件来处理全屏的问题非常方便，但是今天正常使用遇到个bug

  • 安装npm包npm i screenfull默认的是最新版本
  • 导入import ScreenFull from 'screenfull'使用
  • 正常使用全屏功能ScreenFull.toggle()

这时候就给我报错了
在这里插入图片描述
出现页面空白加载不出来的情况，我去网上找了几篇文章都说是版本太高，需要降低包插件的版本，我尝试了多次依旧报错

  • 解决

的确要降低版本，我降到得是screenfull@5.2.0版本，那为什么会报错呢？我发现我们导入的路径是module目录下的screenfull，但是其中根本就没有对应的index.js文件
在这里插入图片描述
所以我们得把导入的路径改一下import ScreenFull from 'screenfull/dist/screenfull'，页面就正常显示了，全屏功能也正常了

Aaron Con
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue使用screenfull实现全屏效果
01-18
本文实例为大家分享了Vue使用screenfull实现全屏的具体代码，供大家参考，具体内容如下 安装 npm install --save screenfull 在需要的页面引用 import screenfull from 'screenfull' 全屏使用 全屏 [removed] import screenfull from 'screenfull' export default{ name: 'screenfull', data(){ return
JavaScript跨平台全屏插件Screenful.js.zip
07-19
Screenful.js 是一个简单的跨平台的全屏API封装。它使不同浏览器的全屏实现变得很平滑。而且可以让任何元素全屏。 在线演示 标签：Screenful
vue2中，全屏组件screenfull的使用
weixin_44867717的博客
12-04 1960
全屏
vue2 解决screenfull点击不生效的方法
最新发布
weixin_47675705的博客
05-14 173
解决screenfull不生效
使用screenfull插件报错error in ./node_modules/screenfull/index.js解决思路
qq_37485170的博客
05-11 1094
npm install --save screenfull,使用安装依赖报错。因为直接install安装的版本是^6.0.1，网上查了资料后说是版本太高了，需要降低版本，抱着试一试的心态，选择了降低版本，降成5.*，把导入的路径改一下
关于使用screenfull插件报错问题
qq_42931285的博客
09-19 749
关于使用screenfull报错问题
ScreenFull最新版本报错~目前有效的解决方法
m0_72423813的博客
07-21 1210
2.应该是最新版本用ES6修饰符导致的webpack默认对node_modules中的依赖包不做bable转译引起的错误。[处理方法]在vue.config.js添加强制转译命令transpileDependencies并重启项目。
vue 项目设置全屏，使用screenfull插件
weixin_45665171的博客
03-28 2953
vue项目使用screenfull插件设置全屏，及在项目中导入screenfull插件出现编译错误的解决方法。
vue使用screenfull插件实现全屏功能
10-14
在Vue项目中集成Screenfull插件，可以使全屏操作变得更加便捷。 首先，为了在Vue项目中使用Screenfull.js，我们需要通过npm进行安装。在命令行中输入以下命令： ```bash npm install screenfull --save ``` 这会...
Vue使用screenfull实现全屏
10-14
下面我们将详细介绍如何在Vue项目中使用screenfull实现全屏功能。 首先，你需要在项目中安装screenfull库，这可以通过npm来完成： ```bash npm install --save screenfull ``` 安装完成后，你需要在需要使用全屏...
screenfull.js：用于JavaScript全屏API的跨浏览器使用的简单包装
02-22
screenfull.js 用于JavaScript跨浏览器使用的简单包装，使您可以将页面或任何元素置于全屏状态。 消除浏览器实现上的差异，因此您不必这样做。该软件包功能齐全。 不会接受任何新功能。安装压缩后只有0.7 kB。 下载...
如何使用screenfull实现全屏注意点
HHHHH2187的博客
10-19 343
记录第一次做大屏可视化，实现全屏看网上说法进行操作，实际还是有很多的小问题。
vue插件实现全屏效果screenfull（包含全屏，退出全屏的切换，绑定F11和Esc按键切换）
zhj1329000的博客
12-05 2470
vue插件实现全屏效果screenfull（包含全屏，退出全屏的切换）
全屏解决方案 (screenfull or vueuse)
i_Satan的博客
03-20 833
在 elementui 组件外面包一层 div,并给该 div 添加 ref=“screenFull”(默认是 6.0,vue2 环境下会报错,所以需要安装 5.1.0)如何想让 elementui 组件使用全屏功能,可能会报上述错误.
vue中全屏screenfull使用过程中报错总结
weixin_44224712的博客
06-21 4637
vue中全屏目前实现大体有两种：一种时浏览器自带的。
element + vue 关于全屏screenfull用法以及遇到的问题
m0_54850467的博客
03-11 3058
一.安装screenfull 1.npm install screenfull 直接安装的是最高版本的 下载的时候没报错，引用screenfull的时候就报这个错了 说是webpack.confing 文件不支持最新版本的语法问题 2.卸掉后换成5.1.0 npm install --save-dev screenfull@5.1.0 换成5.1.0 就可以了 二.封装screenfull组件 这里我因为项目需要 部分页面全屏 如果不需要直接 screenfull.toggle(); <templa
学校黑马中后台项目是 引入screenfull插件报错 显示无法使用该插件./node_modules/screenfull/index.js 55:42 Module parse failed: U
xiaolidu11的博客
04-21 245
./node_modules/screenfull/index.js 55:42 Module parse failed: Unexpected token (55:42) 原因是安装的版本过高 降低使用版本就好 了 可以使用screenfull@5.0.0版本 在引入时又出现问题 显示import ScreenFull from 'screenfull' 显示找不到这个目录下的index文件 查看目录 该目录确实没有index文件 修改引入路径 改为import ScreenFull fro
解决screenfull插件加载报错
DZQ1223的博客
05-24 327
在vue.config.json添加 重启项目。解决screenfull插件加载报错。
ScreenFull报错(应用于全屏)
2301_76315784的博客
10-27 129
【代码】ScreenFull报错。
vue使用screenfull
08-25
Vue使用Screenfull库来实现全屏功能。首先，你需要安装Screenfull库。你可以通过npm或yarn来安装，命令如下： ``` npm install screenfull ``` 或 ``` yarn add screenfull ``` 安装完成后，在你的Vue组件中，你可以按照以下步骤来使用Screenfull库： 1. 在需要使用全屏功能的组件中，引入Screenfull库： ```javascript import screenfull from 'screenfull' ``` 2. 创建一个方法来处理全屏功能的逻辑，并在需要触发全屏的事件中调用该方法： ```javascript methods: { toggleFullScreen() { if (screenfull.isEnabled) { screenfull.toggle() } } } ``` 3. 在组件模板中绑定事件，并调用toggleFullScreen方法： ```html <button @click="toggleFullScreen">Toggle Fullscreen</button> ``` 这样，当点击按钮时，就会切换全屏模式。 请注意，不同的浏览器对于全屏功能的支持可能有所不同。在一些浏览器中，全屏功能只能在用户交互的情况下触发。因此，你可能需要根据不同的浏览器做一些额外的处理。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值