基本实现

基本情况是属于只是鼠标点击全屏按钮

• document.exitFullscreen()，退出全屏
• Document.requestFullscreen()，开启全屏
• document.fullscreenElement，返回当前全屏元素

<template><div><el-button v-show="!hasFullScreen" @click="fullScreen"> 开启全屏 </el-button><el-button v-show="hasFullScreen" @click="fullScreen"> 退出全屏 </el-button></div>
</template>
<script>export default {data() {return {// 全屏状态hasFullScreen: false,};},methods: {fullScreen() {// 已开启全屏，需要退出if (this.hasFullScreen && document.fullscreenElement) {document.exitFullscreen();this.hasFullScreen = false;// 未开启全屏，需要开启} else {document.documentElement.requestFullscreen();this.hasFullScreen = true;}},},};
</script>

特殊情况

存在按键盘F11、手动点全屏后中间的×，先说说几种方案

1. fullscreenchange，这个只能监听手动点击按钮的情况，监听不到F11、手动点×，这个方案就不行
2. 阻止键盘F11默认事件，然后手动调用 this.fullScreen()，这种方案其实也不行，正常情况下F11是可以监听到的，但是如果用户鼠标点击搜索栏时F11监听不到，通过F11开启全屏后，再次点击F11也监听不到，这个时候vue中的全屏状态就管理不了了（这里要说明一点，F11不属于全屏，只是隐藏了导航栏等，fullscreenchange 监听不到，document.fullscreenElement 也没有值，所以F11原生的事件直接用不了）
3. 最好的是通过innerHeight、outerHeight，来判断是否全屏

<template><div><el-button v-show="!hasFullScreen" @click="fullScreen"> 开启全屏 </el-button><el-button v-show="hasFullScreen" @click="fullScreen"> 关闭全屏 </el-button></div>
</template>
<script>export default {data() {return {// 全屏状态hasFullScreen: false,};},mounted() {// 监听浏览器窗口来判断是否全屏，用来管理全屏状态window.addEventListener("resize", (e) => {// 这里我准备判断是否相等，但是不知道为什么会存在偏差// 我的电脑是16的偏差，我用我同事的电脑测试，有的是14 有的是18if (Math.abs(innerHeight - outerHeight) < 30) {this.hasFullScreen = true;} else {// 不需要重复修改，这里也有可能是用户修改窗口尺寸if(!this.hasFullScreen) returnthis.hasFullScreen = false;}});},methods: {fullScreen() {if (this.hasFullScreen && document.fullscreenElement) {document.exitFullscreen();} else {document.documentElement.requestFullscreen();}},},};
</script>