esc键退出全屏 vue_Vue实战054：screenfull实现窗口全屏显示

最新推荐文章于 2024-08-14 16:05:04 发布
最新推荐文章于 2024-08-14 16:05:04 发布
阅读量1k 收藏
点赞数 1
文章标签： esc键退出全屏 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36199904/article/details/112399446
版权
本文介绍了在Vue项目中如何使用screenfull组件实现窗口全屏显示和退出功能。通过npm安装screenfull，调用toggle方法根据isFullscreen属性切换全屏状态。同时，文章还涉及了图标切换和检测浏览器是否支持全屏的功能。
摘要由CSDN通过智能技术生成

全屏显示

就是把自己需要的窗口在显示器上最大化显示，跟我们在浏览器中按下键盘上的“F11”按键效果一样。在项目开发中通常就会有全屏功能的需求，在Vue中实现窗口全屏显示还是很简单的，可以利用screenfull组件来实现该功能。

991b45b6b0f248ba69a5a06bc13b81ed.gif

​安装screenfull组件

在命令行中执行：npm install screenfull --save，在node_modules中可以看到screenfull文件夹，screenfull.js在screenfull对象中定义了request、exit、toggle、onchange、onerror、on、off等相应的方法。

63d3db274048697f72fa20d776c86e7b.png

​调用toggle方法

要实现全屏功能我们只要调用screenfull中的toggle方法，该方法通过判断isFullscreen属性来决定调用exit方法还是request方法。因此我们只要在使用的页面引用screenfull，然后通过click方法调用toggle方法就可以实现全屏功能了。

9144567329249874deae20f9207a3b28.png

ICON图标切换

接着我们来完善下功能，添加图标切换功能，定义属性isFull为false默认非全屏显示，当点击全屏时切换icon图标示意可以点击退出全屏。

84c54d4fa1ce68fde31ef3753bdb731c.png

检测是否支持全屏

screenfull只定义了5中常用的浏览器类型，所以screenfull并不是支持所有的浏览器全屏显示的，因此我们在切换前先检测下浏览器是否支持全屏显示功能，这里我们可以调用screenfull中的isEnabled属性。

034923eda8ff2408ec687389d6f97665.png

svg-icon组件定义可以参考Vue实战034：使用SVG图标详解

更多Vue实战技巧可以参考我的专栏：Vue实战系列

机智的大群主
关注
解决了VUE在浏览器全屏下监听不到Esc键盘事件
cast_lzl的博客
11-30 4123
说明： 实测可以在谷歌、火狐、360 浏览器使用 解决了在浏览器全屏下监听不到键盘Esc事件 解决了取消全屏和全屏的同步问题，ESC按键下可以同步 以下是完整的代码， <!--html--> <!-- 全屏显示 --> <div class="btn-fullscreen" @click="ha...
esc键退出全屏 vue_vue中的全屏事件，按esc退出全屏
weixin_39531604的博客
12-22 1804
1、vue页面中根据是否全屏判断当前显示icon图标，isFull为true时表示全屏，默认值为false，并绑定click事件2、click全屏事件fullScreenEvent: function() {let el = document.documentElement;if (this.isFull) {if (document.exitFullscreen) {document.exitF...
vue 点击按钮，实现全屏；esc退出全屏（fullScreen）
qq_37259691的博客
07-29 1441
1.首先安装screenfull 依赖 npm i screenfull -S 2.创建vue组件 <template> <div> <i class="el-icon-rank fullscreen" @click="screenfull"></i> </div> </template> <script> import screenfull from 'screenfull' export defaul
improve- screenfull全屏组件使用（解决全屏下弹窗与提示其他组件显示异常）
最新发布
2301_76671906的博客
08-14 771
screenfull全屏组件使用（解决全屏下弹窗与提示其他组件显示异常）；全屏放大body通过全屏状态值对想要放大的区域进行定位伪全屏放大，实现对应效果区域放大；
vue实现浏览器全屏展示功能
10-15
主要介绍了vue实现浏览器全屏展示功能,项目中使用的是sreenfull插件，执行命令安装，具体实现代码跟随小编一起看看吧
vue全屏显示，esc退出
weixin_43588942的博客
12-09 4998
项目中有要实现全屏的需求，而且全屏和非全屏的状态有差异。 1、项目中使用的是sreenfull插件，执行命令安装 npm install --save screenfull 2、安装好后，引入项目，用一个按钮进行控制即可，按钮方法如下： toggleFullscreen() { if (!screenfull.enabled) { this.$message({ message: ‘you bro...
vue实现浏览器全屏
LGDmar的博客
05-26 893
1.安装 npm install --save screenfull 2.引入到页面 import screenfull from 'screenfull' 3.调用全屏事件 /** * 全屏事件 */ screenfull() { if (!screenfull.enabled) { this.$message({ message: 'Your browser does not work', type: 'warning'
vue使用screenfull插件，Esc退出，F11切换，图标切换问题；
weixin_45579925的博客
07-28 1322
这里项目要求Esc，F11切换，图标都得跟着变换；我根据百度下好几个大佬方法合并了以下代码； 这里是项目用的html <div class="screenfull" @click="isScreenFull"> <img v-if="!isFullscreen" src="img/icon/screenfull.png" alt="" /> <img v-if="isFullscreen" src="img/icon/screenfull-close.pn
浏览器全屏，按下两次esc方法的解决思路
gansu12的博客
07-23 887
浏览器全屏，按下两次esc方法的解决思路
前端vue实现全屏和按esc退出全屏功能
weixin_44770377的博客
05-13 3508
function openBig () { # 想要全屏展示的模块包含class名content var elem = document.querySelector('.content'); requestFullScreen(elem); }; function requestFullScreen (elem) { #兼容不同的浏览器 var requestMethod = elem.requestFullScreen || elem.webkitRequestFullScree
指定元素全屏与退出全屏，Vue中处理监听esc并修改data数据（监听与作用域问题）
weixin_46037781的博客
11-05 1095
文章目录一、效果二、解决思路三、全屏与退出全屏 一、效果 解决的问题：vue本身监听不到全屏状态中的esc事件，导致无法修改这个按钮的样式icon和tooltip 未全屏时： 全屏时： 二、解决思路 一个重要方法：判断当前是否全屏 问题：如果vue本身的话，在esc事件时是不会调用这个方法的 /** 浏览器当前是否全屏 @return {*|boolean} */ export function isFullScreen() { return document.isFullScreen |
enter-exitFullScreen:用于控制浏览器进入或退出全屏的按钮
06-15
进入-退出全屏 用于控制浏览器进入或退出全屏的按钮 它只适用于 Chrome 和 Firefox； 是玩具！
vue中设置全屏和退出全屏,esc和f11的按键事件的特殊处理
wangsiyisiyi的博客
05-20 5174
//mounted中 //本来想直接禁掉esc的键盘按下的默认行为的,但是浏览器会有个提示,并且百度看了众多解决方案,这个提示貌似不好去掉 // if (navigator.keyboard && navigator.keyboard.lock) { // // 禁用esc退出全屏 // navigator.keyboard.lock(['Escape']) // } else { // console.log('您的浏览器上不支持该功能
vue 使用screenfull.js，退出全屏时不能监控到首次按下esc
ccc_cccc_ccc的博客
06-06 1547
需求：全屏时，导航栏隐藏；取消全屏时，导航栏显示。 取消全屏时监听esc mounted() { //添加键盘Esc事件 this.$nextTick(() => { document.addEventListener("keyup", e => { if (e.keyCode == 27) { this.changeMethodf(); //事件名 } }); }); }, 存在问题：首次
vue 使用 screenfull插件 开启/关闭全屏
m0_49337807的博客
08-04 744
vue 使用 screenfull插件 开启/关闭全屏
screenfull.js实现全屏和退出全屏的功能
08-22 1160
<template> <div> <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" /> </div> </template> <script> import screenfull from 'screenfull' export default { name: 'Screenfull', da
vue 全屏 screenfull —— 整页全屏，指定元素全屏，退出全屏，全屏切换等
热门推荐
朝阳39的博客
06-30 1万+
安装 npm install screenfull --save 使用方法 import screenfull from "screenfull"; 属性 screenfull.isFullscreen; // 布尔值——当前页面是否全屏 screenfull.isEnabled; // 布尔值——当前浏览器是否支持全屏 方法 默认作用于全屏，若想作用于指定元素，则将指定元素作为参数传入。 screenfull.request(); // 全屏 screenfull.exit(); // 退出.
Vue3 全屏模式展示元素及监听全屏状态事件
weixin_44732078的博客
03-01 3493
举个🌰：这里有一个需求，点击开启大屏按钮，使展示数据的元素全屏展示，全屏中当然还有一个关闭全屏按钮，这两个操作就需要调用开启全屏和关闭全屏的方法。但是必须要考虑一点就是当用户按 Esc 键时，也应该将全屏关闭，这就需要对全屏状态进行监听了。浏览器之间的差异性，比如 Gecko 自动为元素添加了 CSS 规则，使其拉伸以填满屏幕。用户总是可以自行退出全屏模式的：按下 Esc 键，这时候我们就可以监听全屏的状态来做一些需求需要的操作。对于一个你想要以全屏模式的元素，可以通过调用它的。
实现开启全屏模式和关闭全屏模式
m0_70896270的博客
07-25 1994
浏览器底层给我们提供了开启全屏和关闭全屏的API 1 开启全屏: document.documentElement.requestFullscreen() 2 关闭全屏: document.exitFullscreen()
Vue-cli3实战：打造全屏滚动组件v-fullpage
"基于vue-cli3快速发布fullpage组件的教程" 在本文中，我们将深入探讨如何使用vue-cli3工具快速创建并发布一个基于Vue.js的Fullpage组件。Vue-cli3是一个强大的脚手架，用于快速搭建 Vue.js 项目，简化开发流程。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值