ant design pro v5 - 05 顶部菜单 - 最大化按钮

 

 1. 最大化按钮：

添加文件：/src/components/Common/FullScreen.tsx 

import React from 'react';
import { Tooltip } from 'antd';
import {
    FullscreenOutlined,
    FullscreenExitOutlined
} from '@ant-design/icons';

// 全屏
class FullScreen extends React.Component {
    state = {
        isFullScreen: true
    };
    //调用事件
    fullScreen = () => {
        let isFullScreen = document.webkitIsFullScreen
        if (!isFullScreen) {
            this.requestFullScreen();
        } else {
            this.exitFullscreen();
        }
        this.setState({ isFullScreen: isFullScreen })
    };
    //进入全屏
    requestFullScreen = () => {
        var de = document.documentElement;
        if (de.requestFullscreen) {
            de.requestFullscreen();
        } else if (de.mozRequestFullScreen) {
            de.mozRequestFullScreen();
        } else if (de.webkitRequestFullScreen) {
            de.webkitRequestFullScreen();
        } else if (de.msRequestFullscreen) {
            de.webkitRequestFullScreen();
        }
    };
    //退出全屏
    exitFullscreen = () => {
        var de = document;
        if (de.exitFullScreen) {
            de.exitFullScreen();
        } else if (de.mozExitFullScreen) {
            de.mozExitFullScreen();
        } else if (de.webkitExitFullscreen) {
            de.webkitExitFullscreen();
        } else if (de.msExitFullscreen) {
            de.msExitFullscreen();
        }
    };
    render() {
        return (
            <Tooltip placement="bottom" title={<span>全屏</span>}>
                {React.createElement(
                    this.state.isFullScreen ? FullscreenOutlined : FullscreenExitOutlined,
                    {
                        onClick: this.fullScreen
                    }
                )
                }
            </Tooltip>
        )
    }
}
export default FullScreen;

插入按钮：/src/components/RightContent/index.tsx 

{/* 全屏按钮 */}
<FullScreen />

完整文件：/src/components/RightContent/index.tsx  

import { Space } from 'antd';
import { SettingDrawer } from '@ant-design/pro-layout';
import { QuestionCircleOutlined, MoreOutlined } from '@ant-design/icons';
import React from 'react';
import { useModel, SelectLang } from 'umi';
import Avatar from './AvatarDropdown';
import FullScreen from '../Common/FullScreen';
import HeaderSearch from '../HeaderSearch';
import styles from './index.less';
import NoticeIconView from '../NoticeIcon';

export type SiderTheme = 'light' | 'dark';

export type HeaderRight = {
  onSettings: (settings: any) => void;
};

const GlobalHeaderRight: React.FC<HeaderRight> = (props) => {

  const { onSettings } = props;

  const { initialState } = useModel('@@initialState');

  if (!initialState || !initialState.settings) {
    return null;
  }

  const { navTheme, layout } = initialState.settings;
  let className = styles.right;

  if ((navTheme === 'dark' && layout === 'top') || layout === 'mix') {
    className = `${styles.right}  ${styles.dark}`;
  }

  return (
    <Space className={className}>
      {/* <HeaderSearch
        className={`${styles.action} ${styles.search}`}
        placeholder="站内搜索"
        defaultValue="umi ui"
        options={[
          {
            label: <a href="https://umijs.org/zh/guide/umi-ui.html">umi ui</a>,
            value: 'umi ui',
          },
          {
            label: <a href="next.ant.design">Ant Design</a>,
            value: 'Ant Design',
          },
          {
            label: <a href="https://protable.ant.design/">Pro Table</a>,
            value: 'Pro Table',
          },
          {
            label: <a href="https://prolayout.ant.design/">Pro Layout</a>,
            value: 'Pro Layout',
          },
        ]} 
        onSearch={value => {
        console.log('input', value);
      }}
      /> */}
      {/* 全屏按钮 */}
      <FullScreen />
      {/* 语言选择 */}
      <SelectLang className={styles.action} />
      {/* <span
        className={styles.action}
        onClick={() => {
          window.open('https://pro.ant.design/docs/getting-started');
        }}
      >
        <QuestionCircleOutlined />
      </span> */}
      <NoticeIconView />
      <Avatar menu />
      {/* 顶部风格设置 */}
      <SettingDrawer
        disableUrlParams
        enableDarkTheme
        settings={initialState?.settings}
        onSettingChange={(settings) => {
          onSettings(settings);
        }}
      />
    </Space>
  );
};

export default GlobalHeaderRight;