48 lines
1.3 KiB
JavaScript
48 lines
1.3 KiB
JavaScript
import { computed, onMounted, ref } from "vue";
|
|
import { unrefElement } from "@vueuse/core";
|
|
|
|
//#region src/shared/useSize.ts
|
|
function useSize(element) {
|
|
const size = ref();
|
|
const width = computed(() => size.value?.width ?? 0);
|
|
const height = computed(() => size.value?.height ?? 0);
|
|
onMounted(() => {
|
|
const el = unrefElement(element);
|
|
if (el) {
|
|
size.value = {
|
|
width: el.offsetWidth,
|
|
height: el.offsetHeight
|
|
};
|
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
if (!Array.isArray(entries)) return;
|
|
if (!entries.length) return;
|
|
const entry = entries[0];
|
|
let width$1;
|
|
let height$1;
|
|
if ("borderBoxSize" in entry) {
|
|
const borderSizeEntry = entry.borderBoxSize;
|
|
const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
|
|
width$1 = borderSize.inlineSize;
|
|
height$1 = borderSize.blockSize;
|
|
} else {
|
|
width$1 = el.offsetWidth;
|
|
height$1 = el.offsetHeight;
|
|
}
|
|
size.value = {
|
|
width: width$1,
|
|
height: height$1
|
|
};
|
|
});
|
|
resizeObserver.observe(el, { box: "border-box" });
|
|
return () => resizeObserver.unobserve(el);
|
|
} else size.value = void 0;
|
|
});
|
|
return {
|
|
width,
|
|
height
|
|
};
|
|
}
|
|
|
|
//#endregion
|
|
export { useSize };
|
|
//# sourceMappingURL=useSize.js.map
|