js 全屏与退出全屏

    //进入全屏
    launchFullscreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen();
      }
    },
    //退出全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    //全屏按钮,点击屏幕上的按钮触发的事件
    fullScreen() {
      this.isfullScreen = !this.isfullScreen;
      if (this.isfullScreen) {
        this.launchFullscreen(document.documentElement);
      } else {
        this.exitFullscreen();
      }
    },

--------------------------------------------------------------------------------------------------

上述是实习的时候在网上找的方法

尚硅谷Vue3项目的方案如下：

都是dom原生的方法，但是注意可能会有兼容性风险

市面上很多插件也可以实现全屏

//全屏按钮点击的回调
const fullScreen = () => {
    //DOM对象的一个属性:可以用来判断当前是不是全屏模式[全屏:true,不是全屏:false]
    let full = document.fullscreenElement;
    //切换为全屏模式
    if (!full) {
        //文档根节点的方法requestFullscreen,实现全屏模式
        document.documentElement.requestFullscreen();
    } else {
        //变为不是全屏模式->退出全屏模式
        document.exitFullscreen();
    }
}