docs(collapse-panel): 在已经打开的面板时修改了内容导致高度改变了面板显示不完整 (#1570)

Co-authored-by: hxh <1047739781>
Tencent · Sep 10, 2024 · 1af6e21 · 1af6e21
1 parent 0aa1bc5
commit 1af6e21
Showing 1 changed file with 23 additions and 4 deletions.
diff --git a/src/collapse/collapse-panel.tsx b/src/collapse/collapse-panel.tsx
@@ -61,15 +61,16 @@ export default defineComponent({
           wrapperHeight.value = `${headHeight}px`;
           return;
         }
-        const { height: bodyHeight } = bodyRef.value.getBoundingClientRect();
-        const height = headHeight + bodyHeight;
-        wrapperHeight.value = `${height}px`;
+        setContentWrapperHeight();
       });
     };
 
     watch(
       isActive,
       () => {
+        if (wrapperHeight.value === 'auto') {
+          setContentWrapperHeight();
+        }
         nextTick(() => updatePanelState());
       },
       {
@@ -108,13 +109,31 @@ export default defineComponent({
       );
     };
 
+    const setContentWrapperHeight = () => {
+      const { height: headHeight } = headRef.value.getBoundingClientRect();
+      const { height: bodyHeight } = bodyRef.value.getBoundingClientRect();
+      const height = headHeight + bodyHeight;
+      wrapperHeight.value = `${height}px`;
+    };
+
+    const onTransitionEnd = () => {
+      if (isActive.value) {
+        wrapperHeight.value = 'auto';
+      }
+    };
+
     return () => {
       const headerContent = renderTNodeJSX('header');
       const noteContent = renderTNodeJSX('headerRightContent');
       const leftIcon = renderTNodeJSX('headerLeftIcon');
 
       return (
-        <div ref={wrapRef} class={rootClass.value} style={{ height: wrapperHeight.value }}>
+        <div
+          ref={wrapRef}
+          class={rootClass.value}
+          style={{ height: wrapperHeight.value }}
+          onTransitionend={onTransitionEnd}
+        >
           <div ref={headRef} class={`${componentName.value}__title`} onClick={handleClick}>
             <TCell
               class={[