[improvement] Card: jsx (#2448)

packages/card/index.js

@@ -0,0 +1,84 @@
+import createSfc from '../utils/create';
+import createBem from '../utils/bem';
+import Tag from '../tag';
+
+const bem = createBem('van-card');
+
+export default createSfc({
+  name: 'card',
+
+  props: {
+    tag: String,
+    desc: String,
+    thumb: String,
+    title: String,
+    centered: Boolean,
+    lazyLoad: Boolean,
+    thumbLink: String,
+    num: [Number, String],
+    price: [Number, String],
+    originPrice: [Number, String],
+    currency: {
+      type: String,
+      default: '¥'
+    }
+  },
+
+  render(h) {
+    const { thumb, isDef, $slots: slots } = this;
+
+    const Thumb = (slots.thumb || thumb) && (
+      <a href={this.thumbLink} class={bem('thumb')}>
+        {slots.thumb ||
+          (this.lazyLoad ? (
+            <img class={bem('img')} v-lazy={thumb} />
+          ) : (
+            <img class={bem('img')} src={thumb} />
+          ))}
+        {this.tag && (
+          <Tag mark type="danger" class={bem('tag')}>
+            {this.tag}
+          </Tag>
+        )}
+      </a>
+    );
+
+    const Title = slots.title || (this.title && <div class={bem('title')}>{this.title}</div>);
+
+    const Desc =
+      slots.desc || (this.desc && <div class={[bem('desc'), 'van-ellipsis']}>{this.desc}</div>);
+
+    const Price = (slots.price || isDef(this.price)) && (
+      <div class={bem('price')}>{slots.price || `${this.currency} ${this.price}`}</div>
+    );
+
+    const OriginPrice = isDef(this.originPrice) && (
+      <div class={bem('origin-price')}>{`${this.currency} ${this.originPrice}`}</div>
+    );
+
+    const Num = (slots.num || isDef(this.num)) && (
+      <div class={bem('num')}>{slots.num || `x ${this.num}`}</div>
+    );
+
+    const Footer = slots.footer && <div class={bem('footer')}>{slots.footer}</div>;
+
+    return (
+      <div class={bem()}>
+        <div class={bem('header')}>
+          {Thumb}
+          <div class={bem('content')}>
+            {Title}
+            {Desc}
+            {slots.tags}
+            <div class="van-card__bottom">
+              {Price}
+              {OriginPrice}
+              {Num}
+            </div>
+          </div>
+        </div>
+        {Footer}
+      </div>
+    );
+  }
+});

packages/card/index.vue

@@ -1,108 +0,0 @@
-<template>
-  <div :class="b()">
-    <div :class="b('header')">
-      <a
-        v-if="thumb || $slots.thumb"
-        :href="thumbLink"
-        :class="b('thumb')"
-      >
-        <slot name="thumb">
-          <img
-            v-if="lazyLoad"
-            v-lazy="thumb"
-            :class="b('img')"
-          >
-          <img
-            v-else
-            :src="thumb"
-            :class="b('img')"
-          >
-        </slot>
-        <van-tag
-          v-if="tag"
-          mark
-          type="danger"
-          :class="b('tag')"
-        >
-          {{ tag }}
-        </van-tag>
-      </a>
-
-      <div :class="b('content')">
-        <slot name="title">
-          <div
-            v-if="title"
-            v-text="title"
-            :class="b('title')"
-          />
-        </slot>
-        <slot name="desc">
-          <div
-            v-if="desc"
-            v-text="desc"
-            :class="[b('desc'), 'van-ellipsis']"
-          />
-        </slot>
-        <slot name="tags" />
-
-        <div class="van-card__bottom">
-          <div
-            v-if="isDef(price)"
-            :class="b('price')"
-          >
-            <slot name="price">{{ currency }} {{ price }}</slot>
-          </div>
-          <div
-            v-if="isDef(originPrice)"
-            :class="b('origin-price')"
-          >
-            {{ currency }} {{ originPrice }}
-          </div>
-          <div
-            v-if="isDef(num) || $slots.num"
-            :class="b('num')"
-          >
-            <slot name="num">x {{ num }}</slot>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div
-      :class="b('footer')"
-      v-if="$slots.footer"
-    >
-      <slot name="footer" />
-    </div>
-  </div>
-</template>
-
-<script>
-import VanTag from '../tag';
-import create from '../utils/create';
-
-export default create({
-  name: 'card',
-
-  components: {
-    VanTag
-  },
-
-  props: {
-    tag: String,
-    desc: String,
-    thumb: String,
-    title: String,
-    centered: Boolean,
-    lazyLoad: Boolean,
-    thumbLink: String,
-    num: [Number, String],
-    price: [Number, String],
-    originPrice: [Number, String],
-    currency: {
-      type: String,
-      default: '¥'
-    }
-  }
-});
-</script>

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

@@ -4,26 +4,21 @@ 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">
+      <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"></a>
-          <!----></a>
         <div class="van-card__content">
           <div class="van-card__title">2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男</div>
           <div class="van-card__desc van-ellipsis">描述信息</div>
           <div class="van-card__bottom">
             <div class="van-card__price">¥ 2.00</div>
-            <!---->
             <div class="van-card__num">x 2</div>
           </div>
         </div>
       </div>
-      <!---->
     </div>
   </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;">
+      <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>
-        标签
-      </span></a>
         <div class="van-card__content">
           <div class="van-card__title">2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男</div>
           <div class="van-card__desc van-ellipsis">描述信息</div>
@@ -34,9 +29,7 @@ exports[`renders demo correctly 1`] = `
         </span></div>
           <div class="van-card__bottom">
             <div class="van-card__price">¥ 2.00</div>
-            <div class="van-card__origin-price">
+            <div class="van-card__origin-price">¥ 10.00</div>
-              ¥ 10.00
-            </div>
             <div class="van-card__num">x 2</div>
           </div>
         </div>