页面全屏展示 与 关闭效果

页面全屏展示 与 关闭效果

这里是基于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()   //开启全屏
      }
  }

3，引入字体图标：

4，效果图：