Vue设置页面全屏

在Vue中设置页面全屏，可以通过调用浏览器提供的全屏API来实现。以下是一个简单的Vue组件示例，展示了如何切换全屏状态：

<template>
  <div>
    <button @click="toggleFullScreen">Toggle Full Screen</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    toggleFullScreen() {
      if (!document.fullscreenElement) {
        this.enterFullScreen();
      } else {
        this.exitFullScreen();
      }
    },
    enterFullScreen() {
      let element = document.documentElement;
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) { /* Firefox */
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) { /* IE/Edge */
        element.msRequestFullscreen();
      }
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) { /* Firefox */
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) { /* IE/Edge */
        document.msExitFullscreen();
      }
    }
  }
}
</script>

在这个组件中，toggleFullScreen 方法检查当前是否有元素处于全屏状态，如果没有，则调用 enterFullScreen 方法进入全屏；如果有，则调用 exitFullScreen 方法退出全屏。enterFullScreen 和 exitFullScreen 方法分别调用相应的全屏请求方法，并对不同浏览器进行了兼容性处理。