前端vue实现全屏和按esc退出全屏功能

效果如下：

不多说，直接上代码如下，复制即可使用，注意图片位置修改即可：

1、vue页面中根据是否全屏判断当前显示图片或icon图标，isFullScren为true时表示全屏，默认值为false，并绑定click事件

 <el-tooltip:content="isFullScren?'退出全屏':'全屏'"effect="dark"placement="bottom"><div class="top-bar__item" style="height: 30px;" @click="fullScreenEvent"><!--<img style="height:20px;margin:0 10px" :src="isFullScren?tuichuquanping:quanping"/>--><i :class="isFullScren?'el-icon-crop':'el-icon-full-screen'" @click="fullScreenEvent"></i></div></el-tooltip>

2、click全屏事件

 data() {return {isFullScren:false,quanping:require('@/assets/img/header/quanping.png'),tuichuquanping:require('@/assets/img/header/tuichuquanping.png')}}methods: {fullScreenEvent() {let el = document.documentElement;if (this.isFullScren) {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}} else {if (el.requestFullscreen) {el.requestFullscreen();} else if (el.mozRequestFullScreen) {el.mozRequestFullScreen();} else if (el.webkitRequestFullScreen) {el.webkitRequestFullScreen();} else if (el.msRequestFullscreen) {el.msRequestFullscreen();}}},
}

3、页面初始化渲染完成后，绑定fullscreenchange的全屏改变监听事件，这样按esc退出全屏时也会触发

mounted() {let isFullscreen =document.fullscreenElement ||document.mozFullScreenElement ||document.webkitFullscreenElement ||document.fullScreen ||document.mozFullScreen ||document.webkitIsFullScreen;isFullscreen = !!isFullscreen;let that = this;document.addEventListener("fullscreenchange", () => {that.isFullScren = !that.isFullScren;});document.addEventListener("mozfullscreenchange", () => {that.isFullScren = !that.isFullScren;});document.addEventListener("webkitfullscreenchange", () => {that.isFullScren = !that.isFullScren;});document.addEventListener("msfullscreenchange", () => {that.isFullScren = !that.isFullScren;});
},

前端vue实现全屏和按esc退出全屏功能相关推荐

esc键退出全屏 vue_vue中的全屏事件，按esc退出全屏
1.vue页面中根据是否全屏判断当前显示icon图标,isFull为true时表示全屏,默认值为false,并绑定click事件 2.click全屏事件 fullScreenEvent: functi ...
js设置长按esc退出全屏；拦截所有所有按键事件；全屏模式下拦截esc按键；javascript；chrome
转载请注明来源,谢谢实现长按esc退出全屏,全屏模式下拦截esc按键事件作者:theajack 浏览器的全屏api requestFullscreen 在全屏模式下会屏蔽掉对 esc 按键的监听, ...
监听ESC退出全屏事件
全屏时,监听不到ESC退出全屏事件时可以试试这个方法: // 绑定监听事件 fullListen() {let screen = document.getElementById("scree ...
为什么java退出全屏_Java全屏模式与退出全屏：
该楼层疑似违规已被系统折叠隐藏此楼查看此楼浏览器全屏模式的启动函数requestFullscreen(),而且需要附带各浏览器的js方言前缀. Js代码: // 启动全屏!判断浏览器的种类 fun ...
java 控制台全屏_Java全屏模式与退出全屏：
该楼层疑似违规已被系统折叠隐藏此楼查看此楼浏览器全屏模式的启动函数requestFullscreen(),而且需要附带各浏览器的js方言前缀. Js代码: // 启动全屏!判断浏览器的种类 fun ...
Vue项目中监听全屏事件，实现全屏功能和按esc退出全屏（解决全屏踩坑难题）
展示效果: 全屏功能代码: <el-buttontype="button"id="full-btn-medium"@click="VideoF ...
前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
一.文章引导 #mermaid-svg-9sKRaMRBkdCcbAh2 {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
js点击成全屏，再点击或者ESC退出全屏
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
JS控制全屏，监听退出全屏事件
先放個官方 Web API 接口链接:全屏 API 网上基本都是这种: //全屏功能document.getElementById("ck_buts").onclick = fu ...

前端vue实现全屏和按esc退出全屏功能

前端vue实现全屏和按esc退出全屏功能相关推荐

最新文章

热门文章