import { ref, computed, Ref, unref } from 'vue';
|
import { useEvent } from './useEvent';
|
import { screenMap, sizeEnum, screenEnum } from '/@/enums/breakpointEnum';
|
|
let globalScreenRef: Ref<sizeEnum | undefined>;
|
let globalWidthRef: Ref<number>;
|
let globalRealWidthRef: Ref<number>;
|
|
export function useBreakpoint() {
|
return {
|
screenRef: computed(() => unref(globalScreenRef)),
|
widthRef: globalWidthRef,
|
screenEnum,
|
realWidthRef: globalRealWidthRef,
|
};
|
}
|
|
// 只要调用一次即可
|
export function createBreakpointListen(fn?: Fn) {
|
const screenRef = ref<sizeEnum>(sizeEnum.XL);
|
const realWidthRef = ref(window.innerWidth);
|
|
function getWindowWidth() {
|
const width = document.body.clientWidth;
|
const xs = screenMap.get(sizeEnum.XS)!;
|
const sm = screenMap.get(sizeEnum.SM)!;
|
const md = screenMap.get(sizeEnum.MD)!;
|
const lg = screenMap.get(sizeEnum.LG)!;
|
const xl = screenMap.get(sizeEnum.XL)!;
|
if (width < xs) {
|
screenRef.value = sizeEnum.XS;
|
} else if (width < sm) {
|
screenRef.value = sizeEnum.SM;
|
} else if (width < md) {
|
screenRef.value = sizeEnum.MD;
|
} else if (width < lg) {
|
screenRef.value = sizeEnum.LG;
|
} else if (width < xl) {
|
screenRef.value = sizeEnum.XL;
|
} else {
|
screenRef.value = sizeEnum.XXL;
|
}
|
realWidthRef.value = width;
|
}
|
|
useEvent({
|
el: window,
|
name: 'resize',
|
listener: () => {
|
fn && fn();
|
getWindowWidth();
|
},
|
});
|
|
getWindowWidth();
|
globalScreenRef = computed(() => unref(screenRef));
|
globalWidthRef = computed((): number => screenMap.get(unref(screenRef)!)!);
|
globalRealWidthRef = computed((): number => unref(realWidthRef));
|
return {
|
screenRef: globalScreenRef,
|
screenEnum,
|
widthRef: globalWidthRef,
|
realWidthRef: globalRealWidthRef,
|
};
|
}
|