使用screenfull插件报错问题

简介: 使用screenfull插件报错问题

我们实现全屏功能可以直接手写方法,但利用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',页面就正常显示了,全屏功能也正常了

相关文章
vite环境引入web worker方法
在 vite 环境中使用 web worker 时,如果遇到生产环境中 worker.js 文件的 MIME 类型被识别为 text/html,导致报错无法运行的情况时,可以参考以下两种方法,原理都是避免编译时产出单独的 worker.js 文件。方法一worker文件不需要包装,引入时后缀增加 ?worker&inline,使用时直接 new ImportedWorker();self.
1622 1
|
物联网 网络性能优化
IoT平台业务通信Topic设计最佳实践(共享场景为例)
以共享充电宝业务场景为例,讲解业务中topic和payload的规划设计
5868 0
|
12月前
|
JavaScript 前端开发
JavaScript如何判断变量undefined
JavaScript如何判断变量undefined
|
8月前
|
弹性计算 运维 监控
云产品评测|阿里云服务诊断
云服务诊断是阿里云提供的运维工具,帮助用户快速定位和解决云资源问题。通过“健康状态”和“诊断”两大功能,用户可实时查看云资源状态,排查如网站无法访问、ECS故障、配置错误等常见问题,并根据修复建议迅速恢复业务。该工具显著提升了问题解决效率,降低了使用门槛。建议增加自定义告警、多维度数据展示、自动化修复等功能,进一步优化用户体验。
222 0
云产品评测|阿里云服务诊断
|
SQL 存储 安全
带你读《Apache Doris 案例集》——07查询平均提速700% ,奇安信基于 Apache Doris 升级日志安全分析系统(2)
带你读《Apache Doris 案例集》——07查询平均提速700% ,奇安信基于 Apache Doris 升级日志安全分析系统(2)
524 0
screenfull全屏、退出全屏、指定元素全屏的使用步骤
screenfull全屏、退出全屏、指定元素全屏的使用步骤
801 5
|
定位技术
高德地图之获取经纬度并且根据获取经纬度渲染到路线规划
高德地图之获取经纬度并且根据获取经纬度渲染到路线规划
317 0
|
存储 弹性计算 运维
数据灾备中心:创新性企业灾备管理服务
阿里云数据灾备中心旨在提供创新的灾备解决方案,确保企业业务连续性和数据安全。面对数据风险,如误删、勒索软件等,即使在公共云上,企业仍需灾备措施。数据灾备中心提供统一管理,通过3-2-1法则实现全面保护,特色包括统一覆盖多种资源、直观的星级评分和3D展示、简化运维流程。未来将推出更多功能,如资源分组评分、一体化策略中心、定制报表和消息中心,以支持不同行业的高要求,如金融、医疗等。
24953 8
数据灾备中心:创新性企业灾备管理服务
|
Linux Windows
【已解决】Error: error:0308010C:digital envelope routines::unsupported
【已解决】Error: error:0308010C:digital envelope routines::unsupported
984 0
|
API
uniapp怎么实现授权登录
uniapp怎么实现授权登录
417 2

热门文章

最新文章