vue usa JavaScript para lograr la pantalla completa y salir de la pantalla completa

 Haga clic en el botón de pantalla completa para mostrar la página completa en pantalla completa (equivalente a abrir el navegador y oscurecer F11)

Código en <plantilla>

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

Supongo que te gusta

Origin blog.csdn.net/cdd9527/article/details/130420864
Recomendado
Clasificación