vue_____点击变成全屏功能

技术需要沉淀gogo

于 2024-08-20 16:35:12 发布

阅读量17

点赞数 1

分类专栏： vue2 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/apple_70049717/article/details/141362234

版权

vue2 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用场景：登录进去就是大屏，所以需要点击登录之后就是全屏

    toggleFullScreen() {
      if (!document.fullscreenElement) {
        // 如果当前不在全屏模式
        if (document.documentElement.requestFullscreen) {
          document.documentElement.requestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) { // Firefox
          document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) { // Chrome, Safari and Opera
          document.documentElement.webkitRequestFullscreen();
        } else if (document.documentElement.msRequestFullscreen) { // IE/Edge
          document.documentElement.msRequestFullscreen();
        }
      } else {
        // 如果当前在全屏模式
        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();
        }
      }
    }