页面全屏展示 与 关闭效果
这里是基于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() //开启全屏
}
}