vue 使用 JavaScript 实现全屏与退出全屏

 点击全屏按钮，整个页面全屏展示（相当于打开浏览器暗 F11）

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