react 实现全屏预览功能，使用 h5 的requestFullScreen api

进入全屏

1
2
3
4
5
6
7
8
9
10
11
12
13
requestFullscreen = () => {
  const _this = this.fullFlow // ref
  if (!_this) return
  if (_this?.requestFullscreen) {
    _this?.requestFullscreen()
  } else if (_this?.mozRequestFullScreen) {
    _this?.mozRequestFullScreen()
  } else if (_this?.webkitRequestFullscreen) {
    _this?.webkitRequestFullscreen()
  } else if (_this?.msRequestFullscreen) {
    _this?.msRequestFullscreen()
  }
}

退出全屏

1
2
3
4
5
6
7
8
9
10
11
12
exitFullscreen = () => {
  if (!document) return
  if (document?.exitFullscreen) {
    document?.exitFullscreen()
  } else if (document?.mozCancelFullScreen) {
    document?.mozCancelFullScreen()
  } else if (document?.webkitExitFullscreen) {
    document?.webkitExitFullscreen()
  } else if (document?.msExitFullscreen) {
    document?.msExitFullscreen()
  }
}