JS全屏模式

时间:2020-06-30
本文章向大家介绍 JS全屏模式 ,主要包括 JS全屏模式 使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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

原文地址:https://www.cnblogs.com/cnyanqun/p/13213565.html