84 lines
1.9 KiB
TypeScript
84 lines
1.9 KiB
TypeScript
export enum Size {
|
|
SMALL = 'sm',
|
|
MEDIUM = 'md',
|
|
LARGE = 'lg',
|
|
EXTRA_LARGE = 'xl',
|
|
}
|
|
|
|
export type ScreenSize =
|
|
| typeof Size.SMALL
|
|
| typeof Size.MEDIUM
|
|
| typeof Size.LARGE
|
|
| typeof Size.EXTRA_LARGE
|
|
|
|
export const defaultScreenConfig = {
|
|
[Size.SMALL]: 576,
|
|
[Size.MEDIUM]: 768,
|
|
[Size.LARGE]: 992,
|
|
[Size.EXTRA_LARGE]: 1200,
|
|
}
|
|
|
|
export const useScreen = () => {
|
|
const screenSize = reactive({
|
|
width: 0,
|
|
height: 0,
|
|
})
|
|
|
|
const current = ref<ScreenSize>(Size.SMALL)
|
|
|
|
const getSize = (width?: number) => {
|
|
if (width === undefined) width = screenSize.width
|
|
const {
|
|
[Size.SMALL]: sm,
|
|
[Size.MEDIUM]: md,
|
|
[Size.LARGE]: lg,
|
|
[Size.EXTRA_LARGE]: xl,
|
|
} = defaultScreenConfig
|
|
if (width < Number(sm)) return Size.SMALL
|
|
if (width < Number(md)) return Size.MEDIUM
|
|
if (width < Number(lg)) return Size.LARGE
|
|
if (width < Number(xl)) return Size.EXTRA_LARGE
|
|
return Size.EXTRA_LARGE
|
|
}
|
|
|
|
const onWindowResize = () => {
|
|
const { innerWidth, innerHeight } = window
|
|
screenSize.width = innerWidth
|
|
screenSize.height = innerHeight
|
|
current.value = getSize()
|
|
}
|
|
|
|
const higherThan = (size: ScreenSize) => {
|
|
const {
|
|
[Size.SMALL]: sm,
|
|
[Size.MEDIUM]: md,
|
|
[Size.LARGE]: lg,
|
|
[Size.EXTRA_LARGE]: xl,
|
|
} = defaultScreenConfig
|
|
const width = screenSize.width
|
|
if (size === Size.SMALL) return width >= Number(sm)
|
|
if (size === Size.MEDIUM) return width >= Number(md)
|
|
if (size === Size.LARGE) return width >= Number(lg)
|
|
if (size === Size.EXTRA_LARGE) return width >= Number(xl)
|
|
return false
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (typeof window === 'undefined') return
|
|
window.addEventListener('resize', onWindowResize)
|
|
getSize(window.innerWidth)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (typeof window === 'undefined') return
|
|
window.removeEventListener('resize', onWindowResize)
|
|
})
|
|
|
|
return {
|
|
getSize,
|
|
screenSize,
|
|
current,
|
|
higherThan,
|
|
}
|
|
}
|