React 全屏Dom

1. 新建 screen.ts 文件

/** DOM-全屏 */
const requestFullScreen = (domName: any) => {
  return new Promise(resolve => {
    let dom: any = document.getElementById(domName);//绑定想要全屏的组件
    if (dom.requestFullscreen) {
      dom.requestFullscreen();
    } else if (dom.mozRequestFullScreen) {
      dom.mozRequestFullScreen();
    } else if (dom.webkitRequestFullScreen) {
      dom.webkitRequestFullScreen();
    }

    resolve()
  })
};

/** DOM-退出全屏 */
const exitFullscreen = () => {
  return new Promise(resolve => {
    let dom: any = document;
    if (dom.exitFullscreen) {
      dom.exitFullscreen();
    } else if (dom.mozCancelFullScreen) {
      dom.mozCancelFullScreen();
    } else if (dom.webkitCancelFullScreen) {
      dom.webkitCancelFullScreen();
    }
    resolve()
  })
};

export {
  requestFullScreen,
  exitFullscreen
}

　　

2. 新建 index.tsx

import React, { Component } from "react"
import { ExpandOutlined, CompressOutlined } from '@ant-design/icons'
import { requestFullScreen, exitFullscreen } from '../../utils/screen'

type IndexToProps = {
}
type IndexToState = {
  isEnlarge: boolean
}

class Index extends Component<IndexToProps, IndexToState> {
  constructor(props: IndexToProps) {
    super(props)
    this.state = {
      isEnlarge: false
    }
  }

  /** 进入全屏 */
  setRequestFullScreen = (v: number) => {
    requestFullScreen(`${v}card`).then(() => {
      this.setState({
        isEnlarge: !this.state.isEnlarge
      })
    })
  }

  /** 退出全屏 */
  setExitFullscreen = () => {
    exitFullscreen().then(() => {
      this.setState({
        isEnlarge: !this.state.isEnlarge
      })
    })
  }

  render() {
    return (
      <>
　　　　　<div id="bigDom">放大/收缩元素</div>
       {
         !this.state.isEnlarge ? <ExpandOutlined onClick={(e) => this.setRequestFullScreen('bigDom')} /> : 
         <CompressOutlined onClick={this.setExitFullscreen} />
       }
      </>
    )
  }
}

export default Index