reactive

src/components/ReactiveLayout/index.vue

@@ -35,7 +35,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { throttle } from "lodash";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 
 const props = defineProps<{
   elementWidth: number;
@@ -71,6 +72,21 @@ onMounted(() => {
   );
 });
 
+const handleResize = () => {
+  widthOfContainer.value = containerRef.value?.clientWidth!;
+  maxNumInOneLine.value = getMaxNumInOneLine(
+    widthOfContainer.value!,
+    widthOfElement.value,
+    ELEMENT_MIN_GAP
+  );
+};
+
+window.onresize = throttle(handleResize, 100);
+
+onBeforeUnmount(() => {
+  window.onresize = null;
+});
+
 function getMaxNumInOneLine(
   containerWidth: number,
   elementWidth: number,