开发需求对于某些页面元素较多,或者需要突出显示部分元素避免干扰的组件(主要挂载在HtmlElement
元素下)来说,document
提供了一个全屏显示的api来方便我们操作。
我们同时也可以通过onresize
全局事件用于监听是否进行全屏操作,代码如下:
/**
* 全屏/退出全屏显示切换开关
* @param element 当前显示container
*/
export function togglefullScrollFunc() {
if (!document.fullscreenElement) {
// 没有fullscreenelement元素,可以进行全屏显示操作, 全屏模式
document.getElementById('flowable-process-designer')?.requestFullscreen()
}
else {
// 退出全屏模式
document.exitFullscreen()
}
}
window.onresize = ()=> {
if (document.fullscreenElement) {
console.log('进入全屏')
this.rightOffset = '0px'
} else {
this.quanPing = false
this.rightOffset = '-30px'
}
}
如上可以通过onresize
配合document.fullscreenElement
进行监听或者是通过requestFullscreen
的回调函数配合记录更新当前状态均可。