34 lines
929 B
TypeScript
34 lines
929 B
TypeScript
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||
|
|
|
||
|
|
export function useLandscape() {
|
||
|
|
const windowWidth = ref(window.innerWidth)
|
||
|
|
const windowHeight = ref(window.innerHeight)
|
||
|
|
|
||
|
|
const isLandscape = computed(() => windowWidth.value > windowHeight.value)
|
||
|
|
const isMobile = computed(() => Math.min(windowWidth.value, windowHeight.value) < 768)
|
||
|
|
const isMobileLandscape = computed(() => isMobile.value && isLandscape.value)
|
||
|
|
|
||
|
|
function onResize() {
|
||
|
|
windowWidth.value = window.innerWidth
|
||
|
|
windowHeight.value = window.innerHeight
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
window.addEventListener('resize', onResize)
|
||
|
|
window.addEventListener('orientationchange', onResize)
|
||
|
|
})
|
||
|
|
|
||
|
|
onUnmounted(() => {
|
||
|
|
window.removeEventListener('resize', onResize)
|
||
|
|
window.removeEventListener('orientationchange', onResize)
|
||
|
|
})
|
||
|
|
|
||
|
|
return {
|
||
|
|
isLandscape,
|
||
|
|
isMobile,
|
||
|
|
isMobileLandscape,
|
||
|
|
windowWidth,
|
||
|
|
windowHeight,
|
||
|
|
}
|
||
|
|
}
|