JS控制全屏模式

全屏方法

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

检查是否全屏

<script>
//onresize 事件会在窗口或框架被调整大小时发生。
mounted() {
	var _this = this;
	window.onresize = function() {
		_this.checkFullScreen();
	}
},
methods:{
	checkFullScreen() {
            let isFull =
            // document.fullscreenEnabled ||
                window.fullScreen ||
                document.webkitIsFullScreen ||
                document.msFullscreenEnabled;
            if (isFull === undefined) {
                isFull = false;
            }
            this.isFullScreen = isFull;
        },
},
//用完销毁下事件
destroyed() {
    window.onresize = null;
}
//其他写法
window.addEventListener('resize', this.checkFullScreen);
window.removeEventListener("resize", this.checkFullScreen);//销毁
</script> 

打开全屏

<script>
openFullScreen() {
	let docElm = document.body;
	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> 

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

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

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