vuestic-ui
Version:
Vue 3 UI Framework
34 lines (33 loc) • 1.21 kB
JavaScript
import { ref, onMounted, onBeforeUnmount } from "vue";
const useElementRect = (element) => {
const rect = ref({ top: 0, left: 0, width: 0, height: 0, bottom: 0, right: 0 });
let resizeObserver;
let mutationObserver;
const updateRect = () => {
if (element.value) {
rect.value = element.value.getBoundingClientRect();
}
};
onMounted(() => {
resizeObserver = new ResizeObserver(updateRect);
mutationObserver = new MutationObserver(updateRect);
element.value && resizeObserver.observe(element.value);
element.value && mutationObserver.observe(element.value, { attributes: true, childList: true, subtree: true });
window.addEventListener("resize", updateRect);
window.addEventListener("scroll", updateRect);
updateRect();
});
onBeforeUnmount(() => {
resizeObserver == null ? void 0 : resizeObserver.disconnect();
mutationObserver == null ? void 0 : mutationObserver.disconnect();
window.removeEventListener("resize", updateRect);
window.removeEventListener("scroll", updateRect);
resizeObserver = void 0;
mutationObserver = void 0;
});
return rect;
};
export {
useElementRect as u
};
//# sourceMappingURL=useElementRect.mjs.map