vue全屏，退出全屏、监听ESC退出全屏

一、所有内容全屏

<template>
    <div class="Quanping">
        <el-button style="position: absolute;top: 0%;right: 0%;background-color: palegreen" @click="toFullOrExit()">
                {{ isFull ? '关闭全屏' : '全屏' }}
            </el-button>
     </div>
</template>
 
<script>
export default {
  data()
  {
    return {
        isFull: false, //全屏显示true
      }
  },
  created()
  {
    
  },
  mounted()
  {
 
  },
  methods: {
    //全屏----start
            toFullOrExit() {
                this.isFull = !this.isFull
                if (this.isFull) {
                    this.requestFullScreen()
                } else {
                    this.exitFullscreen()
                }
            },
            requestFullScreen() {
                let de = document.documentElement
                if (de.requestFullscreen) {
                    de.requestFullscreen()
                } else if (de.mozRequestFullScreen) {
                    de.mozRequestFullScreen()
                } else if (de.webkitRequestFullScreen) {
                    de.webkitRequestFullScreen()
                }
            },
            exitFullscreen() {
                let de = document
                if (de.exitFullscreen) {
                    de.exitFullscreen()
                } else if (de.mozCancelFullScreen) {
                    de.mozCancelFullScreen()
                } else if (de.webkitCancelFullScreen) {
                    de.webkitCancelFullScreen()
                }
            },
            //全屏----end
  }
}
</script>

效果跟F11效果一样

二、部分内容全屏

<template>
    <div class="Quanping"  id="screen">
        <el-button style="position: absolute;top: 0%;right: 0%;background-color: palegreen" @click="screen()">
                 {{ fullscreen ? '关闭全屏' : '全屏' }}
            </el-button>
     </div>
</template>
 
<script>
export default {
  data()
  {
    return {
        fullscreen: false, //全屏显示true
      }
  },
  created()
  {
  },
  mounted()
  {
 // 添加全屏事件监听器
            this.fullListen()
  },
  methods: {

            // 绑定监听事件
            fullListen() {
                let screen = document.getElementById("screen");
                if (screen.requestFullscreen) {
                    document.addEventListener("fullscreenchange", () => {
                        if (this.getFullscreenElement() == null) {
                            this.fullscreen = false;
                            this.buttonName = this.fullscreen ? "关闭全屏" : "全屏展示"
                        }
                    })
                }
            },
            // 获取全屏状态
            getFullscreenElement() {
                return (
                    document['fullscreenElement'] ||
                    document['mozFullScreenElement'] ||
                    document['msFullScreenElement'] ||
                    document['webkitFullscreenElement'] || null
                );
            },
    //全屏----start
            screen() {
                let element = document.getElementById('screen');
                if (this.fullscreen) {
                    // 关闭全屏
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                } else {
                    // 全屏
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen();
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
                    } else if (element.msRequestFullscreen) {
                        // IE11
                        element.msRequestFullscreen();
                    }
                }
                this.fullscreen = !this.fullscreen;
            },
            //全屏----end
  }
}
</script>

三、监听ESC退出全屏事件

// 绑定监听事件
            fullListen() {
                let screen = document.getElementById("screen");
                if (screen.requestFullscreen) {
                    document.addEventListener("fullscreenchange", () => {
                        if (this.getFullscreenElement() == null) {
                            this.fullscreen = false;
                            this.buttonName = this.fullscreen ? "关闭全屏" : "全屏展示"
                        }
                    })
                }
            },
            // 获取全屏状态
            getFullscreenElement() {
                return (
                    document['fullscreenElement'] ||
                    document['mozFullScreenElement'] ||
                    document['msFullScreenElement'] ||
                    document['webkitFullscreenElement'] || null
                );
            },

mounted() {
            // 添加全屏事件监听器
            this.fullListen()
        },