[new feature] Card: add tag slot (#2636)

packages/card/en-US.md

@@ -68,5 +68,6 @@ Use slot to custom content.
 | price | Custom price |
 | origin-price | Custom origin price |
 | thumb | Custom thumb |
+| tag | Custom thumb tag |
 | tags | Custom tags |
 | footer | Custom footer |

packages/card/index.js

@@ -25,6 +25,7 @@ export default sfc({
     const { thumb, $slots: slots } = this;
 
     const showThumb = slots.thumb || thumb;
+    const showTag = slots.tag || this.tag;
     const showNum = slots.num || isDef(this.num);
     const showPrice = slots.price || isDef(this.price);
     const showOriginPrice = slots['origin-price'] || isDef(this.originPrice);
@@ -37,10 +38,14 @@ export default sfc({
           ) : (
             <img class={bem('img')} src={thumb} />
           ))}
-        {this.tag && (
-          <Tag mark type="danger" class={bem('tag')}>
-            {this.tag}
-          </Tag>
+        {showTag && (
+          <div class={bem('tag')}>
+            {slots.tag || (
+              <Tag mark type="danger">
+                {this.tag}
+              </Tag>
+            )}
+          </div>
         )}
       </a>
     );

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

@@ -18,7 +18,9 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-card">
-      <div class="van-card__header"><a class="van-card__thumb"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img"><span class="van-tag van-tag--mark van-card__tag" style="background-color:#f44;">标签</span></a>
+      <div class="van-card__header"><a class="van-card__thumb"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img">
+          <div class="van-card__tag"><span class="van-tag van-tag--mark" style="background-color:#f44;">标签</span></div>
+        </a>
         <div class="van-card__content">
           <div class="van-card__title">2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男</div>
           <div class="van-card__desc van-ellipsis">描述信息</div>

packages/card/zh-CN.md

@@ -49,7 +49,7 @@ Vue.use(Card);
 | thumb | 左侧图片 URL | `String` | - | - |
 | title | 标题 | `String` | - | - |
 | desc | 描述 | `String` | - | - |
-| tag | 标签 | `String` | - | 1.3.4 |
+| tag | 图片角标 | `String` | - | 1.3.4 |
 | num | 商品数量 | `String | Number` | - | - |
 | price | 商品价格 | `String | Number` | - | - |
 | origin-price | 商品划线原价 | `String | Number` | - | 1.3.6 |
@@ -68,5 +68,6 @@ Vue.use(Card);
 | price | 自定义价格 |
 | origin-price | 自定义商品原价 |
 | thumb | 自定义图片 |
-| tags | 自定义描述下方的内容 |
+| tag | 自定义图片角标 |
+| tags | 自定义描述下方标签区域 |
 | footer | 自定义右下角内容 |