vue版本
想要双击生产看板
全屏生产看板页面的内容
为了防止点击的时候选中元素,则onselectstart="return false"
<template>
<div id="MainBox" class="board_box">
<div class="title"><span @dblclick="fullScreen" onselectstart="return false">整备生产看板</span>
</div>
</div>
</template>
js逻辑:
用isFullScreen来标识当前是否是全屏状态,如果全屏状态则退出全屏,如果不是则全屏。
为了防止通过esc等退出全屏,添加了monitorFull
监听全屏状态变化,并更新isFullScreen
注意:MainBox
id 为我们要全屏的元素哦,自行修改id即可
// 全屏
fullScreen() {
if (this.isFullScreen) {
if (document.exitFullscreen) {
document.exitFullscreen()
}
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
}
if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
} else {
var el = document.getElementById('MainBox');
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
}
return;
}
},
/**
* 监听页面全屏变化
* 如果不监听全屏Esc或者F11退出状态未及时更新造成报错
*/
monitorFull() {
let that = this;
document.addEventListener("fullscreenchange", function () {
that.getFullScreenStatus();
});
document.addEventListener("mozfullscreenchange", function () {
that.getFullScreenStatus();
});
document.addEventListener("webkitfullscreenchange", function () {
that.getFullScreenStatus();
});
document.addEventListener("msfullscreenchange", function () {
that.getFullScreenStatus();
});
},
//判断是否是全屏
getFullScreenStatus() {
let ifFullScreen = !!(
document.fullscreen ||
document.mozFullScreen ||
document.webkitIsFullScreen ||
document.webkitFullScreen ||
document.msFullScreen
);
this.isFullScreen = ifFullScreen;
}