react实现在网页中全屏操作

1、utils.ts文件

// 展开/全屏

  static requestFullScreen(element: any) {

    let requestMethod =

      element.requestFullscreen ||

      element.webkitRequestFullscreen ||

      element.msRequestFullscreen ||

      element.mozRequestFullScreen

    if (requestMethod) {

      requestMethod.call(element)

    }

  }

  // 退出/全屏

  static exitFullScreen() {

    let documents: any = window.document

    let exitMethod =

      documents.exitFullscreen ||

      documents.webkitExitFullscreen ||

      documents.msExitFullscreen ||

      documents.mozCancelFullScreen

    if (exitMethod) {

      exitMethod.call(documents)

    }

  }

  // 判断是否全屏

  static isFullscreenElement() {

    let documents: any = window.document

    let isFull =

      documents.fullscreenElement ||

      documents.webkitFullscreenElement ||

      documents.msFullscreenElement ||

      documents.mozFullScreenElement

    return !!isFull

  }

2、在引入的页面调用方法

import uiKit from '@/common/uiKit'    // 引入方法

setfullScreen = (type) => {

    if (type) {      //  打开全屏模式

      uiKit.requestFullScreen(document.body)

      this.setState({

        fullScreentype: false,

      })

    } else {    //  退出全屏模式

      uiKit.exitFullScreen()

      this.setState({

        fullScreentype: true,

      })

    }

  }

<div className={cx('fullScreenbox')}>

     {fullScreentype ? (

              <button

                     id="fullScreen"

                     onClick={() => {

                            this.setfullScreen(true)

                      }}

                >

                       <img

                            src="http://img.benewtech.cn/FiHOd580uuEpW28FB1y2QDwSqaDO?2/2/w/100"

                            alt="全屏模式"

                            title="全屏模式"

                          />

                        </button>

                      ) : (

                        <button

                          id="fullScreen"

                          onClick={() => {

                            this.setfullScreen(false)

                          }}

                        >

                          <img

                            src="http://img.benewtech.cn/FnhM1irDajyoIrQfMexxIkhUCbME?2/2/w/100"

                            alt="退出全屏"

                            title="退出全屏"

                          />

                        </button>

                      )}

                    </div>

3.效果