[improvement] Card: add thumb link prop (#1879)

packages/card/demo/index.vue

@@ -2,21 +2,21 @@
   <demo-section background="#fff">
     <demo-block :title="$t('basicUsage')">
       <van-card
-        :title="$t('title')"
-        :desc="$t('desc')"
         num="2"
         price="2.00"
+        :desc="$t('desc')"
+        :title="$t('title')"
         :thumb="imageURL"
       />
     </demo-block>
 
     <demo-block :title="$t('advancedUsage')">
       <van-card
-        :title="$t('title')"
-        :desc="$t('desc')"
         num="2"
-        :tag="$t('tag')"
         price="2.00"
+        :tag="$t('tag')"
+        :desc="$t('desc')"
+        :title="$t('title')"
         :thumb="imageURL"
       >
         <div slot="footer">
@@ -30,6 +30,12 @@
 
 <script>
 export default {
+  i18n: {
+    'zh-CN': {
+      title: '商品标题'
+    }
+  },
+
   data() {
     return {
       imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'

packages/card/en-US.md

@@ -44,7 +44,8 @@ Use `slot` to custom content.
 
 | Attribute | Description | Type | Default |
 |-----------|-----------|-----------|-------------|
-| thumb | Left thumb | `String` | - |
+| thumb | Left thumb image URL | `String` | - |
+| thumb-link | Thumb link URL | `String` | - |
 | title | Title | `String` | - |
 | desc | Description | `String` | - |
 | tag | Tag | `String` | - |

packages/card/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="b({ center: centered })">
-    <div :class="b('thumb')">
+    <a :href="thumbLink" :class="b('thumb')">
       <slot name="thumb">
         <img :src="thumb" :class="b('img')" >
       </slot>
@@ -12,7 +12,7 @@
       >
         {{ tag }}
       </van-tag>
-    </div>
+    </a>
     <div :class="b('content')">
       <slot name="title">
         <div :class="b('row')" v-if="title || isDef(price)">
@@ -22,7 +22,7 @@
       </slot>
       <slot name="desc">
         <div :class="b('row')" v-if="desc || isDef(num)">
-          <div v-if="desc" :class="b('desc')">{{ desc }}</div>
+          <div v-if="desc" :class="[b('desc'), 'van-ellipsis']">{{ desc }}</div>
           <div v-if="isDef(num)" :class="b('num')">x {{ num }}</div>
         </div>
       </slot>
@@ -51,6 +51,10 @@ export default create({
     currency: {
       type: String,
       default: '¥'
+    },
+    thumbLink: {
+      type: String,
+      default: 'javascript:;'
     }
   }
 });

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

@@ -4,17 +4,17 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-card">
-      <div class="van-card__thumb">
+      <a href="javascript:;" class="van-card__thumb">
         <img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img">
         <!---->
-      </div>
+      </a>
       <div class="van-card__content">
         <div class="van-card__row">
-          <div class="van-card__title">标题</div>
+          <div class="van-card__title">商品标题</div>
           <div class="van-card__price">¥ 2.00</div>
         </div>
         <div class="van-card__row">
-          <div class="van-card__desc">描述信息</div>
+          <div class="van-card__desc van-ellipsis">描述信息</div>
           <div class="van-card__num">x 2</div>
         </div>
       </div>
@@ -23,17 +23,17 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-card">
-      <div class="van-card__thumb">
+      <a href="javascript:;" 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-tag--danger van-card__tag">
       标签
-    </span></div>
+    </span></a>
       <div class="van-card__content">
         <div class="van-card__row">
-          <div class="van-card__title">标题</div>
+          <div class="van-card__title">商品标题</div>
           <div class="van-card__price">¥ 2.00</div>
         </div>
         <div class="van-card__row">
-          <div class="van-card__desc">描述信息</div>
+          <div class="van-card__desc van-ellipsis">描述信息</div>
           <div class="van-card__num">x 2</div>
         </div>
       </div>

packages/card/zh-CN.md

@@ -13,10 +13,10 @@ Vue.use(Card);
 
 ```html
 <van-card
-  title="标题"
-  desc="描述"
   num="2"
   price="2.00"
+  desc="描述信息"  
+  title="商品标题"
   :thumb="imageURL"
 />
 ```
@@ -28,9 +28,9 @@ Vue.use(Card);
 <van-card
   num="2"
   tag="标签"
-  desc="描述"  
-  title="标题"
   price="2.00"
+  desc="描述信息"  
+  title="商品标题"
   :thumb="imageURL"
 >
   <div slot="footer">
@@ -44,7 +44,8 @@ Vue.use(Card);
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
-| thumb | 左侧图片 | `String` | - |
+| thumb | 左侧图片 URL | `String` | - |
+| thumb-link | 点击左侧图片后的跳转链接 | `String` | - |
 | title | 标题 | `String` | - |
 | desc | 描述 | `String` | - |
 | tag | 标签 | `String` | - |

packages/vant-css/src/card.css

@@ -4,7 +4,7 @@
 .van-card {
   color: $text-color;
   height: 100px;
-  font-size: 16px;
+  font-size: 12px;
   background: #fafafa;
   position: relative;
   box-sizing: border-box;
@@ -63,10 +63,7 @@
 
   &__desc {
     color: $gray-darker;
-    font-size: 12px;
     max-height: 20px;
-
-    @include ellipsis;
   }
 
   &__price,
@@ -77,13 +74,8 @@
     text-align: right;
   }
 
-  &__price {
-    font-size: 14px;
-  }
-
   &__num {
     color: $gray-darker;
-    font-size: 12px;
   }
 
   &__tag {