<template><div><p>页面内容</p><el-button type="primary" @click="enter_full_screen" v-if="!full">进入</el-button><el-button type="primary" @click="exitFullscreen" v-else>退出</el-button></div>
</template><script>
export default {data() {return {//true是进入全屏，false是退出全屏full: false,};},created() {//指向问题先保存let that = this;//这里是监听ESC的window.onresize = function () {if (!that.checkFull()) {// 退出全屏后要执行的动作console.log("退出全屏");that.full = false;}};},mounted() {//这里是监听F11案件的window.addEventListener("keydown", this.KeyDown, true); // 监听按键事件},methods: {//进入全屏模式enter_full_screen() {this.full = true;document.documentElement.webkitRequestFullScreen();},//退出全屏模式exitFullscreen() {this.full = false;if (document.exitFullscreen) {document.exitFullscreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}},//监听解决F11打开后无法esc退出同时退出全屏的按钮也失效问题。KeyDown(event) {if (event.keyCode === 122) {event.returnValue = false;this.enter_full_screen(); //这里方的是触发全屏的方法}},//监听ESC事件，解决点击按钮全屏后按ESC退出再点击按钮不生效问题。checkFull() {//判断浏览器是否处于全屏状态 （需要考虑兼容问题）//火狐浏览器var isFull =document.mozFullScreen ||document.fullScreen ||//谷歌浏览器及Webkit内核浏览器document.webkitIsFullScreen ||document.webkitRequestFullScreen ||document.mozRequestFullScreen ||document.msFullscreenEnabled;if (isFull === undefined) {isFull = false;}return isFull;},},
};
</script><style>
</style>