页面全屏展示与关闭效果

邢帥兵_

于 2023-04-12 10:36:20 发布

阅读量674

点赞数

分类专栏： react redux 第三方插件使用文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/m0_64875238/article/details/130101044

版权

react 同时被 3 个专栏收录

3 篇文章

订阅专栏

第三方插件使用

3 篇文章

订阅专栏

redux

2 篇文章

订阅专栏

该文章介绍了如何在React应用中结合antdUI实现全屏展示与退出全屏的功能。通过点击按钮，利用useState管理状态，并结合document对象的requestFullscreen和exitFullscreen方法，动态切换全屏状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面全屏展示与关闭效果

这里是基于react框架+antdUI组件库

1， HTML:

       {/* // 全屏展示按钮 */}
              <div className="item" onClick={()=>fullScreen()}>

                {
                  // 判断quacking的值，如果为true，显示<FullscreenExitOutlined/>，否则显示<FullscreenOutlined/>
                  !quacking ? <FullscreenOutlined/> : <FullscreenExitOutlined/>
                }
               
              </div>

2，事件：

  // 按钮点击事件方法
  const fullScreen = () => {
    // 修改quacking的值
    setQuacking(!quacking);
    // 判断quacking的值，如果为true，关闭全屏，否则开启全屏
    if(quacking) {
     document.exitFullscreen()  // 关闭全屏
      } else {
        document.documentElement.requestFullscreen()   //开启全屏
      }
  }