fix(collapse): fix getBoundingClientRect (#1140)

Tencent · Oct 25, 2023 · 234a983 · 234a983
1 parent 8ba5adf
commit 234a983
Showing 1 changed file with 25 additions and 16 deletions.
diff --git a/src/collapse/collapse-panel.vue b/src/collapse/collapse-panel.vue
@@ -93,30 +93,39 @@ export default defineComponent({
     const headRef = ref();
     const wrapperHeight = ref('');
     const updatePanelState = () => {
-      if (!wrapRef.value) {
-        return;
-      }
-      const { height: headHeight } = headRef.value.getBoundingClientRect();
-      if (!isActive.value) {
-        wrapperHeight.value = `${headHeight}px`;
-        return;
-      }
-      const { height: bodyHeight } = bodyRef.value.getBoundingClientRect();
-      const height = headHeight + bodyHeight;
-      wrapperHeight.value = `${height}px`;
-    };
-
-    watch(isActive, () => {
       nextTick(() => {
-        updatePanelState();
+        if (!wrapRef.value) {
+          return;
+        }
+        const { height: headHeight } = headRef.value.getBoundingClientRect();
+        if (!isActive.value) {
+          wrapperHeight.value = `${headHeight}px`;
+          return;
+        }
+        const { height: bodyHeight } = bodyRef.value.getBoundingClientRect();
+        const height = headHeight + bodyHeight;
+        wrapperHeight.value = `${height}px`;
       });
+    };
+
+    watch(
+      isActive,
+      () => {
+        nextTick(() => updatePanelState());
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    watch(panelContent, () => {
+      nextTick(() => updatePanelState());
     });
 
     onMounted(() => {
       if (parent?.defaultExpandAll) {
         updatePanelValue();
       }
-      updatePanelState();
     });
 
     return {