通过js实现浏览器中全屏和取消全屏

兼容三大主流浏览器：谷歌，火狐，Edge

// 检查是否处于全屏模式的函数
function isFullScreen() {
  return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
}

// 进入或退出全屏的函数
function toggleFullScreen() {
  let element = document.documentElement
//   let element = document.getElementById('ms-test')
  if (!isFullScreen()) {
    // 如果不是全屏，则尝试进入全屏
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) { // Safari
      element.webkitRequestFullscreen();
    } else if (element.mozRequestFullScreen) { // Firefox
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) { // IE/Edge
      element.msRequestFullscreen();
    }
  } else {
    // 如果已经是全屏，则退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) { // Safari
      document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) { // Firefox
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) { // IE/Edge
      document.msExitFullscreen();
    }
  }
}

去调用这个toggleFullScreen方法就可以，下面举例：
vue3中element-plus中的案例：（需要全局注册图标）

<el-icon :size="20" @click="toggleFullScreen" class="mr-10"><FullScreen /></el-icon>