前端实现全屏展示

实现

<div style="position: absolute; top: 10px; right: 10px">
	<button class="btn" @click="openFullScreen">{{ isFullscreen ? "退出全屏" : "全屏" }}</button>
</div>

mounted() {
	//监听是否进入全屏模式
	document.addEventListener("fullscreenchange", e => {
		if (document.fullscreenElement) {
			// Console.log("进入全屏");
			this.isFullscreen = true;
		} else {
			// Console.log("退出全屏");
			this.isFullscreen = false;
		}
	});
},
methods: {
	openFullScreen() {
		//点击全屏按钮
		if (this.isFullscreen) {
			//如现在是全屏,则关闭全屏
			exitFullscreen();
		} else {
			// 如果没进入则进入全屏
			launchFullscreen(this.$refs.list);
		}
	}
}

/**
 * 进入全屏
 * @param element 要全屏的元素
 */
export function launchFullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen();
    }
}

/**
 * 退出全屏
 */
export function exitFullscreen() {
    const element = document;
    if (element.exitFullscreen) {
        element.exitFullscreen();
    } else if (element.msExitFullscreen) {
        element.msExitFullscreen();
    } else if (element.mozCancelFullScreen) {
        element.mozCancelFullScreen();
    } else if (element.webkitExitFullscreen) {
        element.webkitExitFullscreen();
    }
}