[new feature] Card: add bottom slot

packages/card/en-US.md

@@ -73,6 +73,7 @@ Use slot to custom content.
 | num | Custom num |
 | price | Custom price |
 | origin-price | Custom origin price |
+| bottom | Custom price bottom |
 | thumb | Custom thumb |
 | tag | Custom thumb tag |
 | tags | Custom tags |

packages/card/index.less

@@ -38,9 +38,9 @@
     position: relative;
     display: flex;
     flex: 1;
-    height: @card-thumb-size;
     flex-direction: column;
     min-width: 0; /* hack for flex box ellipsis */
+    min-height: @card-thumb-size;
 
     &--centered {
       justify-content: center;

packages/card/index.tsx

@@ -28,6 +28,7 @@ export type CardSlots = DefaultSlots & {
   title?: ScopedSlot;
   thumb?: ScopedSlot;
   price?: ScopedSlot;
+  bottom?: ScopedSlot;
   footer?: ScopedSlot;
   'origin-price'?: ScopedSlot;
 };
@@ -117,6 +118,7 @@ function Card(
               {Price}
               {OriginPrice}
               {Num}
+              {slots.bottom && slots.bottom()}
             </div>
           )}
         </div>

packages/card/test/__snapshots__/index.spec.js.snap

@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`render bottom slot 1`] = `
+<div class="van-card">
+  <div class="van-card__header">
+    <div class="van-card__content">
+      <div class="van-card__bottom">
+        <div class="van-card__price">¥ 100</div>Custom Bottom
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`render origin-price slot 1`] = `
 <div class="van-card">
   <div class="van-card__header">

packages/card/test/index.spec.js

@@ -15,3 +15,18 @@ test('render origin-price slot', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('render bottom slot', () => {
+  const wrapper = mount({
+    template: `
+      <card :price="100">
+        <template v-slot:bottom>Custom Bottom</template>
+      </card>
+    `,
+    components: {
+      Card
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

packages/card/zh-CN.md

@@ -73,6 +73,7 @@ Vue.use(Card);
 | num | 自定义数量 |
 | price | 自定义价格 |
 | origin-price | 自定义商品原价 |
+| bottom | 自定义价格下方区域 |
 | thumb | 自定义图片 |
 | tag | 自定义图片角标 |
 | tags | 自定义描述下方标签区域 |