全屏解决方案 (screenfull or vueuse)

ScreenFull 使用 (方案一)

参考文章@朝阳 39

参考文章@半夏_2021

安装

npm install screenfull --save
(默认是 6.0,vue2 环境下会报错,所以需要安装 5.1.0)

vue2 安装

npm i screenfull@5.1.0

引入

import screenfull from “screenfull”;

调用

// 属性
screenfull.isFullscreen; // 布尔值——当前页面是否全屏
screenfull.isEnabled; // 布尔值——当前浏览器是否支持全屏// 方法
screenfull.request(); // 全屏
screenfull.exit(); // 退出全屏
screenfull.toggle(); // 全屏切换 (将指定元素作为参数传入,则只会对该元素进行全屏切换)

案例

<i class="el-icon-full-screen" @click="fullScreenHandler">供应商风险评定</i><script>import screenfull from 'screenfull'function fullScreenHandler() {if (screenfull.isEnabled && !screenfull.isFullscreen) {screenfull.toggle(this.$refs.fullScreen)console.log('点击全屏')}},
</script>

踩坑报错并解决

因为版本问题报错

  • 如果你使用的是 vue2,则使用 5.1.0,因为默认安装 版本是 6.0,在 vue2 环境下会报错
  • vue2 安装指令 : npm i screenfull@5.1.0

screenFull 配合 element-ui 使用报错

element[fn.requestFullscreen] is not a function

如何想让 elementui 组件使用全屏功能,可能会报上述错误.

解决办法:

在 elementui 组件外面包一层 div,并给该 div 添加 ref=“screenFull”

VueUse useFullscreen 使用 (方案二)

vueuse 文档

<UseFullscreen v-slot="{ toggle }"><video /><button @click="toggle">Go Fullscreen</button>
</UseFullscreen>

案例

    <button @click="toggle1">Go Fullscreen</button><divref="box"class="box"style="height: 300px; width: 300px; background-color: tomato"></div>import { useFullscreen } from "@vueuse/core";methods: {toggle1() {let { toggle } = useFullscreen(this.$refs.box);toggle();},},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/760024.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Web APIs】DOM获取元素

目录 1.Web API基本认识 2.获取DOM元素 3.设置/修改DOM元素内容 4.设置/修改DOM元素属性 4.1修改元素常用属性 4.2修改元素样式属性 4.3设置/修改表单属性 5.定时器-间歇函数 1.Web API基本认识 作用&#xff1a;就是使用js去操作html和浏览器 分类&#xff1a;DOM&am…

给wordpress添加自定义字段的分类筛选功能

要为WordPress添加自定义字段的筛选功能&#xff0c;你需要使用WordPress的查询参数(query parameters)和WP_Query类来构建自定义查询。以下是一个详细的示例代码&#xff0c;展示了如何添加自定义字段的筛选功能。 首先&#xff0c;你需要在你的主题或插件的functions.php文件…

windows访问远程服务器上容器的几种直接方式

远程服务器 host上有一个docker container&#xff0c;如何通过 client 直接登陆 container 呢&#xff1f; container 使用 host 的网络&#xff0c;即使用了 --networkhost先配置 container的 ssdh&#xff08;/etc/ssh/sshd_config&#xff09;&#xff0c;相关参数设置 po…

经典过河问题

Safe Passage 题目链接 首先我们想&#xff0c;应该让最快与次快的先过河&#xff0c;然后让他俩来回的带其他人过河 两种考虑方式其实差不多&#xff0c; 一&#xff1a;以右岸为基准 这时我们想&#xff0c;当最快与次快的过河后&#xff0c;我们由两种选择&#xff1a; …

更高效的反射调用方式被我找到了!

背景 在使用Java进行开发时&#xff0c;我们会不可避免的使用到大量的反射操作&#xff0c;比如Spring Boot会在接收到HTTP请求时&#xff0c;利用反射Controller调用接口中的对应方法&#xff0c;或是Jackson框架使用反射来解析json中的数据给对应字段进行赋值&#xff0c;我…

C#进阶-用于Excel处理的程序集

在.NET开发中&#xff0c;处理Excel文件是一项常见的任务&#xff0c;而有一些优秀的Excel处理包可以帮助开发人员轻松地进行Excel文件的读写、操作和生成。本文介绍了NPOI、EPPlus和Spire.XLS这三个常用的.NET Excel处理包&#xff0c;分别详细介绍了它们的特点、示例代码以及…

【Frida】10_用鼠标自动标记棋盘上的雷区(一键过关)

&#x1f6eb; 系列文章导航 【Frida】 00_简单介绍和使用 https://blog.csdn.net/kinghzking/article/details/123225580【Frida】 01_食用指南 https://blog.csdn.net/kinghzking/article/details/126849567【Frida】 03_初识frida-node https://blog.csdn.net/kinghzking/ar…

AI程序员诞生:对程序员的影响与未来展望

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 方向一&#xff1a;AI程序员的优势分析 方向二&#xff1a;AI程序员局限性 方向三&#xff1a;对程序员职业的影响 方向四&…

【吊打面试官系列】Redis篇 - Redis 的回收策略(淘汰策略)?

大家好&#xff0c;我是锋哥。今天分享关于 Redis 的回收策略&#xff08;淘汰策略&#xff09;面试题&#xff0c;希望对大家有帮助&#xff1b; volatile-lru &#xff1a;从已设置过期时间的数据集&#xff08;server.db[i].expires&#xff09;中挑选最近最少使用的数据淘汰…

高通8255芯片首次烧写方法

高通8255芯片首次烧写需要进行分区烧写&#xff0c;方法如下&#xff1a; 目录 一&#xff1a;QFIL安装 二&#xff1a;关于QFIL详细文档 三&#xff1a;简要分区烧写方法 1烧写 meta build 2 然后重启一下机器 3 烧写 flat build 四&#xff1a;正常烧写程序 一&#…

成为高效Java工程师的干货笔记

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流&#xff0c;摸鱼划水的小伙伴&#xff0c;请点击【全栈技术交流群】 作为一名Java工程师&…

Lambda函数与Selenium WebDriverWait类一起使用

Lambda函数是一种匿名函数&#xff0c;也称为内联函数或者lambda表达式。它们在Python中用于创建简短的、一次性的函数。Lambda函数通常用于在代码中传递函数作为参数&#xff0c;或者在需要一个简单的函数&#xff0c;但不想正式定义一个函数的情况下使用。 Lambda函数的特点…

好用电脑桌面便签是什么?电脑好用便签软件推荐

面对电脑屏幕&#xff0c;我常常感到一种无形的压力。繁杂的工作、琐碎的事务&#xff0c;仿佛都在这个小小的屏幕里与我争夺注意力。每当这时&#xff0c;我就特别需要一个能随时记录我重要事项的工具&#xff0c;让我能在忙碌中保持清醒的头脑。 有一天&#xff0c;我发现了…

产品|快!精!强!点点田企业版功能大升级

在诸如农业补贴、农情监测以及种植监管等场景中&#xff0c;农业遥感数据获取门槛高、行业客户软件开发经验不足等痛点一直存在。 针对这一挑战&#xff0c;珈和科技开发了点点田企业版产品&#xff0c;提供农业遥感数据服务&#xff0c;以API交付的方式降低数据获取门槛&…

新手leetcode 126周赛被拷打篇

100262. 求出加密整数的和 难度&#xff1a;568 给你一个整数数组 nums &#xff0c;数组中的元素都是 正 整数。定义一个加密函数 encrypt &#xff0c;encrypt(x) 将一个整数 x 中 每一个 数位都用 x 中的 最大 数位替换。比方说 encrypt(523) 555 且 encrypt(213) 333 。…

外包干了1个月,技术明显进步。。。

我是一名大专生&#xff0c;自19年通过校招进入湖南某软件公司以来&#xff0c;便扎根于功能测试岗位&#xff0c;一晃便是近四年的光阴。今年8月&#xff0c;我如梦初醒&#xff0c;意识到长时间待在舒适的环境中&#xff0c;已让我变得不思进取&#xff0c;技术停滞不前。更令…

Uibot (RPA设计软件)财务会计Web应用自动化(批量开票机器人)

Uibot (RPA设计软件&#xff09;Mage AI智能识别&#xff08;发票识别&#xff09;———机器人的小项目友友们可以参考小北的课前材料五博客~ (本博客中会有部分课程ppt截屏,如有侵权请及请及时与小北我取得联系~&#xff09; 紧接着小北的前两篇博客&#xff0c;友友们我们…

YOLOv5目标检测学习(7):验证部分val.py简要分析;训练、验证、推理三文件的关系

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、val.py的大致结构如下&#xff1a;1.0 准备工作1.获取文件路径2.存储预测信息为.txt文件3.存储预测信息为coco格式的.json文件 1.1 主函数main&#xff1a;…

[MTK6771] android13系统启用OMAPI 支持esim.me

OMAPI是啥&#xff1f;看看谷歌的解释&#xff1a; 说了一大堆懂的人不需要看&#xff0c;不懂的还是看不懂&#xff0c;我就是后者 总之说人话就是&#xff0c;像SIM卡&#xff0c;NFC这类模块需要用到这个东西&#xff0c;那么接着往下看 上层APP想要使用这个OMAPI供应商稳…

五、分支结构

一、程序的组织结构 无论程序是大是小&#xff0c;都可以用顺序结构、选择结构和循环结构表示 二、单分支结构 单分支结构&#xff1a;如果表达式的值是True就执行代码&#xff0c;如果表达式的值是False就跳过语句执行后面语句 ageint(input(请输入你的年龄&#xff1a;)) i…