2021-08-18 全屏组件

全屏组件

import React from 'react';
import { Icon } from 'antd';

/* global ActiveXObject */
function reqFullScreen(e) {
  let requestMethod = e.requestFullScreen
    || e.webkitRequestFullScreen // 谷歌
    || e.mozRequestFullScreen  // 火狐
    || e.msRequestFullScreen; // IE11
  if (requestMethod) {
    requestMethod.call(e);
  } else if (window.ActiveXObject && typeof window.ActiveXObject !== 'undefined') {
    let wscript = new ActiveXObject('WScript.Shell');
    if (wscript !== null) {
      // 模拟F11
      wscript.SendKeys('{F11}');
    }
  }
}

// 全屏指定dom
export const useFullScreen = (e) => {
  if (e) {
    reqFullScreen(e);
  }
}

// 全屏组件
export const FullScreen = ({ target = window }) => {

  const onFullScreen = () => {
    useFullScreen(target);
  }

  return (
    <Icon 
    	onClick={onFullScreen}
        type="fullscreen"
    />
  )
}

使用方式

<FullScreen target={document.querySelector('.frame')} />