feat(Card): 增加 footer (#834)

WeBankFinTech · Jun 11, 2024 · febfa0d · febfa0d
1 parent ba888dd
commit febfa0d
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 17 deletions.
diff --git a/components/card/card.vue b/components/card/card.vue
@@ -6,6 +6,9 @@
         <div :class="`${prefixCls}__body`" :style="bodyStyle">
             <slot />
         </div>
+        <div v-if="$slots.footer" :class="footerClasses">
+            <slot name="footer" />
+        </div>
     </div>
 </template>
 
@@ -35,10 +38,16 @@ export default defineComponent({
             'no-divider': !props.divider,
         }));
 
+        const footerClasses = computed(() => ({
+            [`${prefixCls}__footer`]: true,
+            'no-divider': !props.divider,
+        }));
+
         return {
             prefixCls,
             classes,
             headerClasses,
+            footerClasses,
         };
     },
 });

diff --git a/components/card/style/index.less b/components/card/style/index.less
@@ -22,14 +22,16 @@
         border-color: var(--f-border-color-split);
     }
 
-    &__header {
+    &__header, &__footer {
         box-sizing: border-box;
         padding: var(--f-card-padding);
         color: var(--f-font-color-base);
         font-weight: @font-weight-medium;
         font-size: @font-size-head;
-        border-bottom: var(--f-border-width-base) var(--f-border-style-base)
-            transparent;
+    }
+
+    &__header {
+        border-bottom: var(--f-border-width-base) var(--f-border-style-base) transparent;
         border-bottom-color: var(--f-border-color-split);
 
         &.no-divider {
@@ -38,6 +40,16 @@
         }
     }
 
+    &__footer {
+        border-top: var(--f-border-width-base) var(--f-border-style-base) transparent;
+        border-top-color: var(--f-border-color-split);
+
+        &.no-divider {
+            padding-top: 0;
+            border-top-color: transparent;
+        }
+    }
+
     &__body {
         padding: var(--f-card-padding);
         color: var(--f-font-color-base);

diff --git a/docs/.vitepress/components/card/customFooter.vue b/docs/.vitepress/components/card/customFooter.vue
@@ -0,0 +1,17 @@
+<template>
+    <div class="card-wrapper">
+        <FCard header="这里是标题">
+            卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。
+            <template #footer>
+                <FButton size="small">操作</FButton>
+                <FButton size="small" style="margin-left: 8px;">按钮</FButton>
+            </template>
+        </FCard>
+    </div>
+</template>
+
+<style scoped>
+.card-wrapper {
+    width: 350px;
+}
+</style>
diff --git a/docs/.vitepress/components/card/index.md b/docs/.vitepress/components/card/index.md
@@ -14,47 +14,67 @@ app.use(FCard);
 
 ### 基础用法
 
---BASIC
+:::demo
+basic.vue
+:::
 
 ### 投影效果
 
---SHADOW
+:::demo
+shadow.vue
+:::
 
 ### 设置大小
 
---SIZE
+:::demo
+size.vue
+:::
 
 ### 是否显示边框
 
---BORDERED
+:::demo
+bordered.vue
+:::
 
 ### 是否有标题
 
---HASHEADER
+:::demo
+hasHeader.vue
+:::
 
 ### 是否有分割线
 
---DIVIDER
+:::demo
+divider.vue
+:::
 
 ### 自定义标题
 
---CUSTOMHEADER
+:::demo
+customHeader.vue
+:::
 
-### 自定义内容
+### 自定义底栏
+
+:::demo
+customFooter.vue
+:::
 
---CUSTOMCONTENT
+### 自定义内容
 
---CODE
+:::demo
+customContent.vue
+:::
 
 ## Card Props
 
-| 属性      | 说明                                                                                | 类型                    | 默认值   |
-| --------- | ----------------------------------------------------------------------------------- | ----------------------- | -------- |
+| 属性      | 说明                                                                               | 类型                    | 默认值   |
+|-----------|----------------------------------------------------------------------------------|-------------------------|----------|
 | header    | 卡片的标题 你既可以通过设置 header 来修改标题，也可以通过 slot#header 传入 DOM 节点 | string                  | -        |
 | divider   | 若有 header，则是否显示分割线                                                       | boolean                 | `true`   |
-| bodyStyle | body 的 CSS 样式                                                                    | object\<CSSProperties\> | -        |
+| bodyStyle | body 的 CSS 样式                                                                   | object\<CSSProperties\> | -        |
 | shadow    | 设置阴影显示时机，可选值为 `always` `never` `hover`                                 | string                  | `always` |
-| bordered  | 是否有边框                                                                          | boolean                 | `true`   |
+| bordered  | 是否有边框                                                                         | boolean                 | `true`   |
 | size      | 设置卡片大小，可选值为 `small` `middle` `large`                                     | string                  | `middle` |
 
 ## Card Slots
@@ -63,3 +83,4 @@ app.use(FCard);
 | ------- | -------------- |
 | default | 自定义默认内容 |
 | header  | 卡片标题内容   |
+| footer  | 卡片底栏内容   |