vue は JavaScript を使用して全画面表示を実現し、全画面表示を終了します

 全画面ボタンをクリックすると、ページ全体が全画面で表示されます（ブラウザを開いて F11 キーを暗くするのと同じ）

<テンプレート> のコード

<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;
  },
}