56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
/** 视窗匹配回调函数 */
|
|
export const matchMedia = (
|
|
type: "sm" | "md" | "lg" | string,
|
|
matchFunc?: Function,
|
|
mismatchFunc?: Function
|
|
) => {
|
|
if (type === "sm") {
|
|
if (window.matchMedia("(max-width: 767.98px)").matches) {
|
|
/* 窗口小于或等于 */
|
|
matchFunc?.();
|
|
} else {
|
|
mismatchFunc?.();
|
|
}
|
|
} else if (type === "md") {
|
|
if (window.matchMedia("(max-width: 992px)").matches) {
|
|
/* 窗口小于或等于 */
|
|
matchFunc?.();
|
|
} else {
|
|
mismatchFunc?.();
|
|
}
|
|
} else if (type === "lg") {
|
|
if (window.matchMedia("(max-width: 1200px)").matches) {
|
|
/* 窗口小于或等于 */
|
|
matchFunc?.();
|
|
} else {
|
|
mismatchFunc?.();
|
|
}
|
|
} else {
|
|
if (window.matchMedia(`(max-width: ${type}px)`).matches) {
|
|
/* 窗口小于或等于 */
|
|
matchFunc?.();
|
|
} else {
|
|
mismatchFunc?.();
|
|
}
|
|
}
|
|
};
|
|
|
|
/** 获取视窗宽度 */
|
|
export const useWindowWidth = () => {
|
|
const width = ref(window.innerWidth);
|
|
|
|
const updateWidth = () => {
|
|
width.value = window.innerWidth;
|
|
};
|
|
|
|
onMounted(() => {
|
|
window.addEventListener("resize", updateWidth);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener("resize", updateWidth);
|
|
});
|
|
|
|
return width;
|
|
};
|