mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-04-30 23:04:00 +00:00
106 lines
3.2 KiB
TypeScript
106 lines
3.2 KiB
TypeScript
/**
|
|
* Licensed to the Apache Software Foundation (ASF) under one or more
|
|
* contributor license agreements. See the NOTICE file distributed with
|
|
* this work for additional information regarding copyright ownership.
|
|
* The ASF licenses this file to You under the Apache License, Version 2.0
|
|
* (the "License"); you may not use this file except in compliance with
|
|
* the License. You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
import type { ComputedRef } from "vue";
|
|
import { ref, computed, unref } from "vue";
|
|
import { useEventListener } from "./useEventListener";
|
|
import { screenMap, sizeEnum, screenEnum } from "./data";
|
|
|
|
let globalScreenRef: ComputedRef<sizeEnum | undefined>;
|
|
let globalWidthRef: ComputedRef<number>;
|
|
let globalRealWidthRef: ComputedRef<number>;
|
|
|
|
export interface CreateCallbackParams {
|
|
screen: ComputedRef<sizeEnum | undefined>;
|
|
width: ComputedRef<number>;
|
|
realWidth: ComputedRef<number>;
|
|
screenEnum: typeof screenEnum;
|
|
screenMap: Map<sizeEnum, number>;
|
|
sizeEnum: typeof sizeEnum;
|
|
}
|
|
|
|
export function useBreakpoint(): any {
|
|
return {
|
|
screenRef: computed(() => unref(globalScreenRef)),
|
|
widthRef: globalWidthRef,
|
|
screenEnum,
|
|
realWidthRef: globalRealWidthRef,
|
|
};
|
|
}
|
|
|
|
export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void): any {
|
|
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;
|
|
}
|
|
|
|
useEventListener({
|
|
el: window,
|
|
name: "resize",
|
|
|
|
listener: () => {
|
|
getWindowWidth();
|
|
resizeFn();
|
|
},
|
|
// wait: 100,
|
|
});
|
|
|
|
getWindowWidth();
|
|
globalScreenRef = computed(() => unref(screenRef));
|
|
globalWidthRef = computed((): number => screenMap.get(unref(screenRef)) || 0);
|
|
globalRealWidthRef = computed((): number => unref(realWidthRef));
|
|
|
|
function resizeFn() {
|
|
fn?.({
|
|
screen: globalScreenRef,
|
|
width: globalWidthRef,
|
|
realWidth: globalRealWidthRef,
|
|
screenEnum,
|
|
screenMap,
|
|
sizeEnum,
|
|
});
|
|
}
|
|
|
|
resizeFn();
|
|
return {
|
|
screenRef: globalScreenRef,
|
|
screenEnum,
|
|
widthRef: globalWidthRef,
|
|
realWidthRef: globalRealWidthRef,
|
|
};
|
|
}
|