对监听esc事件和退出全屏问题的解决
vue 的项目中使用了 h5 的全屏 API，在使用esc键退出全屏时，默认调用“ document.exitFullScreen() ” 直接退出，想要做监听并设置业务，需要监听屏幕size变化来出发事件
mounted() {
let that = this
window.addEventListener('resize', function () {
if (!that.isFullScreen()) {
// 非全屏状态
//业务逻辑
}
});
}下面是全屏的完整代码
methods: {
//全屏
fullele() {
return (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
null
);
},
//判断是否全屏
isFullScreen() {
return !!(document.webkitIsFullScreen || this.fullele());
},
//退出全屏
exitFullscreen() {
this.fullScreenFlag = false;
if (document.exitFullScreen) {
document.exitFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
},
//全屏
full(ele) {
if (ele.requestFullscreen) {
ele.requestFullscreen();
} else if (ele.mozRequestFullScreen) {
ele.mozRequestFullScreen();
} else if (ele.webkitRequestFullscreen) {
ele.webkitRequestFullscreen();
} else if (ele.msRequestFullscreen) {
ele.msRequestFullscreen();
}
},
//切换是否全屏 全屏按钮要执行的方法
toggleFullScreen() {
if (this.isFullScreen()) {
this.exitFullscreen();
} else {
this.fullScreenFlag = true;
this.full(document.getElementById("dataMointor")); //要设置全屏的元素
}
}
}element vue全屏与退出全屏(监听ESC改样式)
一、效果
esc退出会监听
二、代码
bom.js（工具）
/**
* 浏览器全屏
* @param {HTMLElement} [el=document] 全屏元素
*/
export function fullScreen(el) {
el = el || document.documentElement;
const rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if (typeof rfs !== 'undefined' && rfs) {
rfs.call(el);
}
}
/**
* 退出全屏
*/
export function exitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
/**
* 浏览器当前是否全屏
* @return {*|boolean}
*/
export function isFullScreen() {
return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
}
design.js（通用）
function toggle(ele, that, exitFullScreen, fullScreen) {
if (that.isFullScreen) {
exitFullScreen()
that.isFullScreen = false
} else {
fullScreen(document.getElementById(ele))
that.isFullScreen = true
}
}
export default {
testVueThis,
toggle
}
- index.vue（示例）
<template>
<my-panel fit
id="test"
:shadow="'never'"
:border="false"
title="cs">
<div id="test">
<div >
<span>cs123</span>
123
</div>
<el-tooltip :content="tooltipText">
<span style="cursor: pointer">
<i :class="icon"
style="font-size: x-large"
@click="toggle"></i>
</span>
</el-tooltip>
</div>
</my-panel>
</template>
<script>
import Design from '@/utils/design'
import { fullScreen, exitFullScreen, isFullScreen } from '$ui/utils/bom'
export default {
data() {
return {
isFullScreen: false
}
},
computed: {
icon() {
return this.isFullScreen ? 'el-icon-switch-button' : 'el-icon-full-screen'
},
tooltipText() {
return this.isFullScreen ? '退出全屏' : '全屏'
}
},
created() {
// 初始化监听器
this.resizeListener()
},
methods: {
resizeListener() {
const that = this
window.addEventListener('resize', function () {
if (!isFullScreen()) {
if (!isFullScreen()) {
that.isFullScreen = false
}
}
})
},
toggle() {
Design.toggle('test', this, exitFullScreen, fullScreen)
}
}
}
</script>
<style>
</style>以上为个人经验，希望能给大家一个参考，也希望大家多多支持Devmax。