vue3中实现全屏效果和取消全屏效果

最新推荐文章于 2024-04-11 17:21:10 发布
最新推荐文章于 2024-04-11 17:21:10 发布
阅读量301 收藏
点赞数 3
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25972233/article/details/136448358
版权

1.首先先封装方法,包含了各个浏览器的参数,各个浏览器进入全屏的函数和退出全屏的函数

2.在组件中去引入

3.在全屏方法中使用

4.写一个函数去监听他的状态变化

5.然后再使用document.addEventListener 监听各个浏览器的全屏状态变化,同时也别忘记了卸载

IT邦少
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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
html js让元素全屏和取消全屏显示
03-29 3263
先获取到元素节点，然后设置全屏即可，这里我是用vue获取的，videoDom就是dom节点，用原生js获取的也是一样的 let videoDom = this.$refs.baseVideoBox; if (videoDom.requestFullscreen) { videoDom.requestFullscreen(); } else if (v...
实现iframe里面的页面全屏
最新发布
青春正在燃烧的博客
04-11 451
iframe中实现点击全屏
Vue3 全屏模式展示元素及监听全屏状态事件
weixin_44732078的博客
03-01 3093
举个🌰：这里有一个需求，点击开启大屏按钮，使展示数据的元素全屏展示，全屏中当然还有一个关闭全屏按钮，这两个操作就需要调用开启全屏和关闭全屏的方法。但是必须要考虑一点就是当用户按 Esc 键时，也应该将全屏关闭，这就需要对全屏状态进行监听了。浏览器之间的差异性，比如 Gecko 自动为元素添加了 CSS 规则，使其拉伸以填满屏幕。用户总是可以自行退出全屏模式的：按下 Esc 键，这时候我们就可以监听全屏的状态来做一些需求需要的操作。对于一个你想要以全屏模式的元素，可以通过调用它的。
Vue3监听页面是否全屏(监听与自动退出全屏)
lplovewjm的博客
08-17 1408
document.fullscreenElement和document.webkitIsFullScreen来判断是否处于全屏状态,监听这两个值来更新是否全屏状态isFullcreen值.
2021-6-3 工作记录--video自动播放+video-视频铺满全屏+带有动画的返回顶部效果+footer-校区展示+ajax 引入新页面
weixin_48850734的博客
06-29 778
video自动播放+video-视频铺满全屏+带有动画的返回顶部效果+footer-校区展示+ajax 引入新页面
原声js控制浏览器全屏或者退出全屏
qq_41114603的博客
09-29 1197
开启全屏 if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } //FireFox else if (document.documentElement.mozRequestFullScreen) { document.docum...
vue 浏览器设置，退出，监听全屏设置
weixin_45563734的博客
02-20 653
vue 浏览器设置，退出，监听全屏设置
vue 项目监听iframe传过来的信息
LZhizi的博客
07-12 1746
iframe 传递接收值
vue实现全屏滚动效果（非fullpage.js）
10-15
主要为大家详细介绍了vue实现全屏滚动效果，非fullpage.js，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现浏览器全屏展示功能
10-15
主要介绍了vue实现浏览器全屏展示功能,项目中使用的是sreenfull插件，执行命令安装，具体实现代码跟随小编一起看看吧
vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频、监听全屏事件
热门推荐
DarlingYL的博客
04-29 1万+
vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频、监听全屏事件
前端JS实现全屏和退出全屏的效果
2301_79420857的博客
01-14 676
全屏效果想必我们都很清楚把，平时追剧看电视剧什么都会使用全屏方便我们看，我们键盘的第一个键esc可以退出全屏，那么我们如何用js实现全屏的办法呢？Document.requestFullscreen()，该方法用于异步请求使元素进入全屏模式，结果会返回一个promise。
vue3全屏与退出全屏动态切换
请叫我欧皇！的博客
06-01 720
需求：设置个按钮，点击后全屏展示，再次点击后退出全屏，就这样。
vue封装一个视频组件（兼容ios和android）
曲小强
04-26 6721
做H5手机端的视频播放器，在期间发现了很多问题，哈哈，也是在不断摸索中成长，废话不多说，放代码： 组件videoChild.vue文件： <template> <div class="container" :class="[{an:isAndroid,ios:isiOS}]"> <video id="first-video" widt...
vue3点击按钮实现全屏和取消全屏效果
x_1999的博客
01-15 844
出现的问题1：用fullscreenchange监听全屏状态的改变时，发现在Chrome浏览器中，无法正确触发该事件，这个问题是由于Chrome浏览器的缺陷引起的。Chrome使用了Webkit引擎，在处理全屏模式时存在一些不一致性。具体来说，Chrome没有正确地实现fullscreenchange事件。出现的问题2:通过按钮点击进入的全屏，不能通过键盘F11退出，相反，通过键盘F11进入的全屏，也不能通过按钮点击退出，
vue3实现全屏滚动效果
04-03
4. 创建全屏滚动组件：在Vue 3中，你可以创建一个全屏滚动组件，该组件包含多个子组件，每个子组件代表一个滚动页面。在该组件中，你可以使用fullPage.js提供的API来初始化和配置全屏滚动效果。 5. 使用动画库：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值