[improvement] Card: add tag prop (#1878)

packages/card/demo/index.vue

@@ -15,6 +15,7 @@
         :title="$t('title')"
         :desc="$t('desc')"
         num="2"
+        :tag="$t('tag')"
         price="2.00"
         :thumb="imageURL"
       >

packages/card/en-US.md

@@ -26,9 +26,10 @@ Use `slot` to custom content.
 
 ```html
 <van-card
+  num="2"
+  tag="Tag"
   title="Title"
   desc="Description"  
-  num="2"
   price="2.00"
   :thumb="imageURL"
 >
@@ -46,6 +47,7 @@ Use `slot` to custom content.
 | thumb | Left thumb | `String` | - |
 | title | Title | `String` | - |
 | desc | Description | `String` | - |
+| tag | Tag | `String` | - |
 | num | Number of goods | `String | Number` | - |
 | price | Price of goods | `String | Number` | - |
 | centered | Whether content vertical centered | `String` | `false` |

packages/card/index.vue

@@ -4,6 +4,14 @@
       <slot name="thumb">
         <img :src="thumb" :class="b('img')" >
       </slot>
+      <van-tag
+        v-if="tag"
+        mark
+        type="danger"
+        :class="b('tag')"
+      >
+        {{ tag }}
+      </van-tag>
     </div>
     <div :class="b('content')">
       <slot name="title">
@@ -33,9 +41,10 @@ export default create({
   name: 'card',
 
   props: {
+    tag: String,
+    desc: String,
     thumb: String,
     title: String,
-    desc: String,
     centered: Boolean,
     num: [Number, String],
     price: [Number, String],

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

@@ -6,6 +6,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-card">
       <div class="van-card__thumb">
         <img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img">
+        <!---->
       </div>
       <div class="van-card__content">
         <div class="van-card__row">
@@ -23,8 +24,9 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-card">
       <div class="van-card__thumb">
-        <img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img">
-      </div>
+        <img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img"> <span class="van-tag van-tag--mark van-tag--danger van-card__tag">
+      标签
+    </span></div>
       <div class="van-card__content">
         <div class="van-card__row">
           <div class="van-card__title">标题</div>

packages/card/zh-CN.md

@@ -26,9 +26,10 @@ Vue.use(Card);
 
 ```html
 <van-card
-  title="标题"
-  desc="描述"  
   num="2"
+  tag="标签"
+  desc="描述"  
+  title="标题"
   price="2.00"
   :thumb="imageURL"
 >
@@ -46,6 +47,7 @@ Vue.use(Card);
 | thumb | 左侧图片 | `String` | - |
 | title | 标题 | `String` | - |
 | desc | 描述 | `String` | - |
+| tag | 标签 | `String` | - |
 | num | 商品数量 | `String | Number` | - |
 | price | 商品价格 | `String | Number` | - |
 | centered | 内容是否垂直居中 | `String` | `false` |

packages/vant-css/src/card.css

@@ -86,6 +86,12 @@
     font-size: 12px;
   }
 
+  &__tag {
+    position: absolute;
+    top: 2px;
+    left: 0;
+  }
+
   &__footer {
     right: 15px;
     bottom: 5px;