- md가 아니라 lg를 기준으로 잡아야 함 - lg의 기준 breakpoint를 940으로 변경 - is100pxMode의 기준 역시 lg breakpoint와 일치
19 lines
693 B
TypeScript
19 lines
693 B
TypeScript
import { useLocalStorage, useMediaQuery } from "@vueuse/core";
|
|
import { keyScreenMode, type ScreenModeType } from "@/defs";
|
|
import { ref, watch } from "vue";
|
|
|
|
export const is1000pxMode = useMediaQuery('(min-width:940px');
|
|
export const isFullWidth = ref(true);
|
|
export const widthMode = useLocalStorage<ScreenModeType>(keyScreenMode, "auto")
|
|
|
|
function setWidthMode([widthMode, is1000pxMode]: [ScreenModeType, boolean]): void {
|
|
if (widthMode == "1000px") {
|
|
isFullWidth.value = true;
|
|
}
|
|
if (widthMode == "500px") {
|
|
isFullWidth.value = false;
|
|
}
|
|
isFullWidth.value = is1000pxMode;
|
|
}
|
|
watch([widthMode, is1000pxMode], setWidthMode);
|
|
setWidthMode([widthMode.value, is1000pxMode.value]); |