vue uses JavaScript to achieve full screen and exit full screen

 Click the full screen button to display the entire page in full screen (equivalent to opening the browser and darkening F11)

Code in <template>

<div>
  <img v-if="!fullscreen" @click="screen" class="full-screen" src="全屏的图片地址" alt="">
  <img v-else @click="exitFullscreen" class="full-screen" src="非全屏的图片地址" alt="">
</div>

data() {
  return {
    fullscreen: false, // 是否全屏状态值
  }
},
methods: {
  // 启动全屏
  screen() {
    this.requestFullscreen(document.documentElement); // 整个网页
    // this.requestFullscreen(document.getElementById("pageBox")); // 某个页面元素
    this.fullscreen = true;
  },
  // 退出全屏
  exitFullscreen() {
    //W3C
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
    //FireFox
    else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    }
    //Chrome等
    else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
    //IE11
    else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    this.fullscreen = false;
  },
}