feat(vue-masonry): recalculate height when content changes

vuesion · Feb 19, 2022 · 8eac1d1 · 8eac1d1
1 parent 9425b3b
commit 8eac1d1
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/src/components/layout/VueMasonry/VueMasonry.vue b/src/components/layout/VueMasonry/VueMasonry.vue
@@ -16,6 +16,7 @@ export default defineComponent({
     height: { type: Number, default: 800 },
   },
   setup(props) {
+    let observer: MutationObserver = null;
     const wrapper: Ref<HTMLElement> = getDomRef(null);
     const actualHeight = ref(props.height);
     const getColumnHeight = (col = 0) => {
@@ -42,10 +43,15 @@ export default defineComponent({
       calculateHeight();
 
       window.addEventListener('resize', calculateHeight);
+
+      observer = new MutationObserver(calculateHeight);
+      observer.observe(wrapper.value, { attributes: true, childList: true, characterData: true, subtree: true });
     });
     onUpdated(() => calculateHeight);
     onBeforeUnmount(() => {
       window.removeEventListener('resize', calculateHeight);
+
+      observer.disconnect();
     });
 
     return {