// 全屏
export function useFullscreen() {
const isFullscreen = ref(false)
const fullEl = ref()
function fullscreenchange() {
isFullscreen.value = document.fullscreenElement == fullEl.value ? true : false
}
function toggle() {
if (isFullscreen.value) {
// 退出全屏
if (document.exitFullscreen && document.fullscreenElement) {
document.exitFullscreen?.()
} else if ((document as any).webkitExitFullscreen) {
;(document as any).webkitExitFullscreen()
} else if ((document as any).mozCancelFullScreen) {
;(document as any).mozCancelFullScreen()
} else if ((document as any).msExitFullscreen) {
;(document as any).msExitFullscreen()
}
} else {
// 进入全屏
if (fullEl.value.requestFullscreen) {
fullEl.value.requestFullscreen()
} else if (fullEl.value.webkitRequestFullscreen) {
fullEl.value.webkitRequestFullscreen()
} else if (fullEl.value.mozRequestFullScreen) {
fullEl.value.mozRequestFullScreen()
} else if (fullEl.value.msRequestFullscreen) {
fullEl.value.msRequestFullscreen()
}
}
fullscreenchange()
}
function keydown(e: any) {
e = e || window.event
// 禁止f11进入全屏
if (e.keyCode === 122 && !isFullscreen.value) {
e.preventDefault()
toggle()
}
}
onMounted(() => {
document.addEventListener('fullscreenchange', fullscreenchange)
window.addEventListener('keydown', keydown)
})
onUnmounted(() => {
document.removeEventListener('fullscreenchange', fullscreenchange)
window.removeEventListener('keydown', keydown)
})
return {
fullEl,
isFullscreen,
toggle
}
}
进入页面全屏
于 2025-03-27 11:38:52 首次发布
917

被折叠的 条评论
为什么被折叠?



