fix(Dialog): don't render header dom when header and closeBtn are fal…

…se (#4841) * fix(Dialog): don't render header dom when header and closeBtn are false * fix(Dialog): compatible "header === 0" special case
Tencent · Dec 17, 2024 · 94b7966 · 94b7966
1 parent 47a7886
commit 94b7966
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 13 deletions.
diff --git a/src/dialog/__tests__/index.test.jsx b/src/dialog/__tests__/index.test.jsx
@@ -81,6 +81,16 @@ describe('Dialog', () => {
       expect(header.text()).toBe('this is header');
     });
 
+    it(':header:false', async () => {
+      const visible = ref(true);
+      const wrapper = mount(() => (
+        <Dialog v-model:visible={visible.value} header={false} closeBtn={false} body="this is content"></Dialog>
+      ));
+      const header = wrapper.find('.t-dialog__header');
+      await nextTick();
+      expect(header.exists()).toBeFalsy();
+    });
+
     it(':placement', async () => {
       const placementList = ['top', 'center'];
       const visible = ref(true);

diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx
@@ -330,6 +330,11 @@ export default defineComponent({
           })}
         </div>
       );
+
+      const headerContent = renderTNodeJSX('header', defaultHeader);
+
+      const footerContent = renderTNodeJSX('footer', defaultFooter);
+
       const headerClassName = isFullScreen.value
         ? [`${COMPONENT_NAME.value}__header`, `${COMPONENT_NAME.value}__header--fullscreen`]
         : `${COMPONENT_NAME.value}__header`;
@@ -341,8 +346,6 @@ export default defineComponent({
       const bodyClassName =
         props.theme === 'default' ? [`${COMPONENT_NAME.value}__body`] : [`${COMPONENT_NAME.value}__body__icon`];
 
-      const footerContent = renderTNodeJSX('footer', defaultFooter);
-
       if (isFullScreen.value && footerContent) {
         bodyClassName.push(`${COMPONENT_NAME.value}__body--fullscreen`);
       } else if (isFullScreen.value) {
@@ -374,18 +377,20 @@ export default defineComponent({
               v-draggable={isModeLess.value && props.draggable}
               ref={dialogEle}
             >
-              <div class={headerClassName} onMousedown={onStopDown}>
-                <div class={`${COMPONENT_NAME.value}__header-content`}>
-                  {getIcon()}
-                  {renderTNodeJSX('header', defaultHeader)}
+              {(headerContent || headerContent === 0 || props.closeBtn) && (
+                <div class={headerClassName} onMousedown={onStopDown}>
+                  <div class={`${COMPONENT_NAME.value}__header-content`}>
+                    {getIcon()}
+                    {headerContent}
+                  </div>
+
+                  {props.closeBtn ? (
+                    <span class={closeClassName} onClick={closeBtnAction}>
+                      {renderTNodeJSX('closeBtn', defaultCloseBtn)}
+                    </span>
+                  ) : null}
                 </div>
-
-                {props.closeBtn ? (
-                  <span class={closeClassName} onClick={closeBtnAction}>
-                    {renderTNodeJSX('closeBtn', defaultCloseBtn)}
-                  </span>
-                ) : null}
-              </div>
+              )}
               <div class={bodyClassName} onMousedown={onStopDown}>
                 {body}
               </div>