惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

B
Blog
D
Docker
J
Java Code Geeks
腾讯CDC
Blog — PlanetScale
Blog — PlanetScale
G
Google Developers Blog
M
MIT News - Artificial intelligence
L
LangChain Blog
T
The Blog of Author Tim Ferriss
P
Proofpoint News Feed
MyScale Blog
MyScale Blog
博客园 - Franky
GbyAI
GbyAI
Hugging Face - Blog
Hugging Face - Blog
aimingoo的专栏
aimingoo的专栏
Last Week in AI
Last Week in AI
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 聂微东
N
Netflix TechBlog - Medium
B
Blog RSS Feed
Y
Y Combinator Blog
阮一峰的网络日志
阮一峰的网络日志
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Google DeepMind News
Google DeepMind News

博客园 - 微宇宙

claude-code 接入阿里云百炼(Model Studio)模型 小程序 - 旧请求 组件计时器 小程序-微信支付和商户接入的流程 弹出框 mp-half-screen-dialog css- around 内容换行 自动贴边显示 echart - 饼图显示数据值 小程序 - 组件内部引入公共 css 样式 git push 错误 js-金额相加 小程序- 字符数据换行 antd-输入框去掉光晕 大屏缩放布局 大屏显示 echarts - 原型的方向盘动画 小程序- 自定义导航栏组件封装 小程序-echart动画git仓库 小程序- 隐私协议完善 小程序- 日期picker样式问题 echart - 折线图显示设置 echart - 移动端提示内容无阴影 echart 柱状图 - 零界点 正负方向展示 小程序 - 导航栏 图标设置 小程序 - 错误问题记录 react-大屏显示antd浮窗 React andt库设置主题色彩 React闭包陷阱 git 操作 小程序 - 订阅消息通知 小程序-分包 mysql安装使用
react项目全屏功能
微宇宙 · 2026-04-21 · via 博客园 - 微宇宙

全屏展示的时候,日期组件不展示在顶部。设置如下:

getPopupContainer={(trigger) => trigger.parentNode}

如果是其他弹出框

getContainer={getContainer()?.current || document.body}

 或者设置:getContainer={false} zIndex={100000}

  // 监听全屏状态变化

 useEffect(() => {
    const handleFullscreenChange = () => {
      setIsFullscreen(
        !!(
          document.fullscreenElement ||
          (document as any).mozFullScreenElement ||
          (document as any).webkitFullscreenElement ||
          (document as any).msFullscreenElement
        )
      );
    };

    document.addEventListener("fullscreenchange", handleFullscreenChange);
    document.addEventListener("mozfullscreenchange", handleFullscreenChange);
    document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
    document.addEventListener("MSFullscreenChange", handleFullscreenChange);

    return () => {
      document.removeEventListener("fullscreenchange", handleFullscreenChange);
      document.removeEventListener(
        "mozfullscreenchange",
        handleFullscreenChange
      );
      document.removeEventListener(
        "webkitfullscreenchange",
        handleFullscreenChange
      );
      document.removeEventListener(
        "MSFullscreenChange",
        handleFullscreenChange
      );
    };
  }, []);
  const toggleFullscreen = () => {
    console.log("当前全屏状态:", isFullscreen);
    const element = containerRef.current;
    if (!element) return;

    if (!isFullscreen) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if ((element as any).mozRequestFullScreen) {
        (element as any).mozRequestFullScreen();
      } else if ((element as any).webkitRequestFullscreen) {
        (element as any).webkitRequestFullscreen();
      } else if ((element as any).msRequestFullscreen) {
        (element as any).msRequestFullscreen();
      }
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if ((document as any).mozCancelFullScreen) {
        (document as any).mozCancelFullScreen();
      } else if ((document as any).webkitExitFullscreen) {
        (document as any).webkitExitFullscreen();
      } else if ((document as any).msExitFullscreen) {
        (document as any).msExitFullscreen();
      }
    }
  };