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

推荐订阅源

B
Blog
量子位
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Last Week in AI
Last Week in AI
酷 壳 – CoolShell
酷 壳 – CoolShell
人人都是产品经理
人人都是产品经理
Jina AI
Jina AI
雷峰网
雷峰网
博客园_首页
WordPress大学
WordPress大学
博客园 - 司徒正美
爱范儿
爱范儿
博客园 - 聂微东
IT之家
IT之家
美团技术团队
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 三生石上(FineUI控件)
有赞技术团队
有赞技术团队
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
T
Tailwind CSS Blog
博客园 - Franky
V
V2EX
GbyAI
GbyAI
阮一峰的网络日志
阮一峰的网络日志

博客园 - 微宇宙

小程序 - 旧请求 组件计时器 小程序-微信支付和商户接入的流程 弹出框 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安装使用 redis安装使用
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();
      }
    }
  };