React函数式组件实现点击按钮全屏操作

最新推荐文章于 2024-06-24 10:30:39 发布

Behind the mask706

最新推荐文章于 2024-06-24 10:30:39 发布

阅读量448

点赞数 5

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_64317807/article/details/136350499

版权

首先，在项目中下载antd库

// npm下载
npm install antd --save
// yarn下载
yarn add antd
// pnpm下载
pnpm install antd --save

再添加相关引用。

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

其次，编写全屏和退出全屏的方法。

const [fullScreen,setFullScreen] = useState(false);
 
useEffect(()=>{
    // 设置是否全屏
    const handleChangeIsFullScreen = ()=>{
        setFullScreen(!!document.fullscreenElement);
    }
    // 监听全屏
    document.addEventListener('fullscreenchange',handleChangeIsFullscreen);
    return ()=>{
        //移除全屏
        document.removeEventListener('fullscreenchange',handleChangeIsFullscreen);
    }
},[])
 
// 全屏
const handleFullscreen = () =>{
    //获取id文档元素请求进入全屏事件
    document.getElementById('fullScreen')?.requestFullscreen();
}
 
// 退出全屏
const handleExitFullscreen = ()=>{
    // 当前文档退出全屏事件
    document.exitFullscreen();
}

最后，创建按钮并引用全屏方法。

<Button 
    type="text"
    onClick={()=>{
        if(fullScreen){
            handleExitFullscreen(); //false退出全屏
        }else{
            handleFullscreen(); //true 进入全屏
        }
    }}
>
    {fullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
</Button>