fix(card): support card extra && header slots, fix divider style bug

onu-ui · May 4, 2023 · 8252789 · 8252789
1 parent 013e0c1
commit 8252789
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/packages/components/card/src/index.vue b/packages/components/card/src/index.vue
@@ -7,7 +7,7 @@ const props = defineProps(cardProps)
 const slots = useSlots()
 
 // 是否展示头部区域
-const needRenderHeader = computed(() => !slots.header && (props.title || props.description || props.extra || slots.extra))
+const needRenderHeader = computed(() => (!slots.header && (props.title || props.description || props.extra || slots.extra)) || slots.header)
 const needRenderBody = computed(() => props.content || slots.default)
 const needRenderActions = computed(() => slots.actions)
 const onlyRenderContent = !needRenderHeader.value && !needRenderActions.value && needRenderBody.value
@@ -39,7 +39,7 @@ const shadowCls: Record<ShadowType, string> = {
       <img :src="cover">
     </div>
     <!-- header -->
-    <div :class="[slots.header && 'o-card-header']">
+    <div class="relative" :class="[slots.header && 'o-card-header']">
       <slot name="header">
         <div v-if="needRenderHeader" class="o-card-header">
           <div class="o-card-header-wrapper">
@@ -50,15 +50,15 @@ const shadowCls: Record<ShadowType, string> = {
               {{ description }}
             </p>
           </div>
-          <div class="o-card-header-extra">
-            <slot name="extra">
-              <OButton v-if="extra" o="primary" text size="xs">
-                {{ extra }}
-              </OButton>
-            </slot>
-          </div>
         </div>
       </slot>
+      <div class="o-card-header-extra">
+        <slot name="extra">
+          <OButton v-if="extra" type="primary" text size="xs">
+            {{ extra }}
+          </OButton>
+        </slot>
+      </div>
     </div>
     <!-- body -->
     <div