JS全屏模式

记录项目中遇到的全屏模式

全屏方法

我是在vue项目中使用这个功能，isFullScreen是全屏变量，用来判断全屏需要进行的操作

打开全屏

<script>
openFullScreen() {
	let docElm = document.getElementById("appConfigurable");
	if (docElm.requestFullscreen) {
		docElm.requestFullscreen();
	} //FireFox
	else if (docElm.mozRequestFullScreen) {
		docElm.mozRequestFullScreen();
	} //Chrome等
	else if (docElm.webkitRequestFullScreen) {
		docElm.webkitRequestFullScreen();
	} //IE11
	else if (docElm.msRequestFullscreen) {
		docElm.msRequestFullscreen();
	}
	this.isFullScreen = true;
},
</script>    

关闭全屏

<script>
cancelFullScreen() {
	if (document.exitFullscreen) {
		document.exitFullscreen();
	} else if (document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
	} else if (document.webkitCancelFullScreen) {
		document.webkitCancelFullScreen();
	} else if (document.msExitFullscreen) {
		document.msExitFullscreen();
	}
	this.isFullScreen = false;
}
</script>    

检查全屏

看到别人写的有document.fullscreenEnabled，但是看到它一直是true注释掉就能用，暂时注释掉，整明白了再更新

<script>
checkFullScreen() {
	let isFull =
	// document.fullscreenEnabled ||
        window.fullScreen ||
        document.webkitIsFullScreen ||
        document.msFullscreenEnabled;
	if (isFull === undefined) {
		isFull = false;
	}
	this.isFullScreen = isFull;
},
</script>    

调用检查全屏

<script>
//onresize 事件会在窗口或框架被调整大小时发生。
mounted() {
	var _this = this;
	window.onresize = function() {
		_this.checkFullScreen();
	}
}
//用完销毁下事件
destroyed() {
    window.onresize = null;
}
//其他写法
window.addEventListener(‘resize‘, this.checkFullScreen);
window.removeEventListener("resize", this.checkFullScreen);//销毁
</script>    

全屏遇到的影响element-ui的问题

在全屏模式下，element-ui的select下拉框不生效，在el-select上加:popper-append-to-body="false"

<el-select v-model="param.content[index].ds.redirectType" :popper-append-to-body="false">
</el-select>
element文档：popper-append-to-body: 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false

JS全屏模式