Files
tianshu-engine/src/composables/useFullscreen.ts

29 lines
617 B
TypeScript

import { ref, onMounted, onUnmounted } from 'vue'
export function useFullscreen() {
const isFullscreen = ref(false)
function sync() {
isFullscreen.value = !!document.fullscreenElement
}
async function toggle() {
if (!document.fullscreenElement) {
await document.documentElement.requestFullscreen().catch(() => {})
} else {
await document.exitFullscreen()
}
}
onMounted(() => {
document.addEventListener('fullscreenchange', sync)
sync()
})
onUnmounted(() => {
document.removeEventListener('fullscreenchange', sync)
})
return { isFullscreen, toggle }
}