JS实现全屏显示和退出全屏功能

开发需求对于某些页面元素较多，或者需要突出显示部分元素避免干扰的组件（主要挂载在HtmlElement元素下）来说，document提供了一个全屏显示的api来方便我们操作。

我们同时也可以通过onresize全局事件用于监听是否进行全屏操作，代码如下：

/**
 * 全屏/退出全屏显示切换开关
 * @param element  当前显示container
 */
export function togglefullScrollFunc() {
  if (!document.fullscreenElement) {
    // 没有fullscreenelement元素，可以进行全屏显示操作, 全屏模式
    document.getElementById('flowable-process-designer')?.requestFullscreen()
  }
  else {
    // 退出全屏模式
    document.exitFullscreen()
  }
}

  window.onresize = ()=> {
      if (document.fullscreenElement) {
        console.log('进入全屏')
        this.rightOffset = '0px'
      } else {
        this.quanPing = false
        this.rightOffset = '-30px'
      }
    }

如上可以通过onresize配合document.fullscreenElement进行监听或者是通过requestFullscreen的回调函数配合记录更新当前状态均可。