Ant-Design-Pro-V5：实现页面全屏。

Rlm*

已于 2023-08-01 14:31:39 修改

阅读量944

点赞数 3

分类专栏： Ant Design 文章标签：前端 react.js

于 2023-06-09 11:37:35 首次发布

本文链接：https://blog.csdn.net/renlimin1/article/details/131124240

版权

Ant Design 专栏收录该内容

16 篇文章 5 订阅

订阅专栏

在这里插入图片描述

一、添加组件页面

/src/components/FullScreen.tsx

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

export default function FullScreen() {
  const [isFullScreen, setIsFullScreen] = useState(true);
  //调用事件
  const fullScreen = () => {
    let isFullScreen = document.webkitIsFullScreen;
    if (!isFullScreen) {
      requestFullScreen();
    } else {
      exitFullscreen();
    }
    setIsFullScreen(isFullScreen);
  };
  //进入全屏
  const 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();
    }
  };
  //退出全屏
  const 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();
    }
  };
  return (
    <Tooltip placement="bottom" title={<span>{isFullScreen ? '全屏' : '退出全屏'}</span>}>
           {isFullScreen ? (
        <FullscreenOutlined
          style={{
            fontSize: '24px',
          }}
          onClick={fullScreen}
        />
      ) : (
        <FullscreenExitOutlined
          style={{
            fontSize: '24px',
          }}
          onClick={fullScreen}
        />
      )}
    </Tooltip>
  );
}

二、引用组件

在/src/components/RightContent/index.tsx 中引入组件

import { Space } from 'antd';
import React from 'react';
import { SelectLang, useModel } from 'umi';
import Avatar from './AvatarDropdown';
import FullScreen from '../FullScreen';// 引入全屏组件
import styles from './index.less';

const GlobalHeaderRight = () => {
  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}>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <FullScreen /> // 使用全屏组件
        <Avatar />
      </div>
    </Space>
  );
};
export default GlobalHeaderRight;