[improvement] Card: functional (#2740)

packages/card/en-US.md

@@ -58,6 +58,12 @@ Use slot to custom content.
 | thumb-link | Thumb link URL | `String` | - |
 | lazy-load | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | `Boolean` | `false` |
 
+### Event
+
+| Event | Description | Arguments |
+|------|------|------|
+| click | Triggered when clicked | - |
+
 ### Slot
 
 | name | Description |

packages/card/index.js

@@ -3,89 +3,105 @@ import Tag from '../tag';
 
 const [sfc, bem] = use('card');
 
-export default sfc({
-  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: '¥'
-    }
-  },
+function Card(h, props, slots, ctx) {
+  const { thumb } = props;
 
-  render(h) {
-    const { thumb, slots } = this;
+  const showThumb = slots.thumb || thumb;
+  const showTag = slots.tag || props.tag;
+  const showNum = slots.num || isDef(props.num);
+  const showPrice = slots.price || isDef(props.price);
+  const showOriginPrice = slots['origin-price'] || isDef(props.originPrice);
 
-    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);
-
-    const Thumb = showThumb && (
-      <a href={this.thumbLink} class={bem('thumb')}>
-        {slots('thumb') ||
-          (this.lazyLoad ? (
-            <img class={bem('img')} vLazy={thumb} />
+  const Thumb = showThumb && (
+    <a href={props.thumbLink} class={bem('thumb')}>
+      {slots.thumb ? (
+        slots.thumb()
+      ) : props.lazyLoad ? (
+        <img class={bem('img')} vLazy={thumb} />
+      ) : (
+        <img class={bem('img')} src={thumb} />
+      )}
+      {showTag && (
+        <div class={bem('tag')}>
+          {slots.tag ? (
+            slots.tag()
           ) : (
-            <img class={bem('img')} src={thumb} />
-          ))}
-        {showTag && (
-          <div class={bem('tag')}>
-            {slots('tag') || (
-              <Tag mark type="danger">
-                {this.tag}
-              </Tag>
-            )}
-          </div>
-        )}
-      </a>
+            <Tag mark type="danger">
+              {props.tag}
+            </Tag>
+          )}
+        </div>
+      )}
+    </a>
+  );
+
+  const Title = slots.title
+    ? slots.title()
+    : props.title && <div class={bem('title')}>{props.title}</div>;
+
+  const Desc = slots.desc
+    ? slots.desc()
+    : props.desc && (
+        <div class={[bem('desc'), 'van-ellipsis']}>{props.desc}</div>
     );
 
-    const Title = slots('title') || (this.title && <div class={bem('title')}>{this.title}</div>);
+  const Price = showPrice && (
+    <div class={bem('price')}>
+      {slots.price ? slots.price() : `${props.currency} ${props.price}`}
+    </div>
+  );
 
-    const Desc =
-      slots('desc') || (this.desc && <div class={[bem('desc'), 'van-ellipsis']}>{this.desc}</div>);
+  const OriginPrice = showOriginPrice && (
+    <div class={bem('origin-price')}>
+      {slots['origin-price']
+        ? slots['origin-price']
+        : `${props.currency} ${props.originPrice}`}
+    </div>
+  );
 
-    const Price = showPrice && (
-      <div class={bem('price')}>{slots('price') || `${this.currency} ${this.price}`}</div>
-    );
+  const Num = showNum && (
+    <div class={bem('num')}>{slots.num ? slots.num() : `x ${props.num}`}</div>
+  );
 
-    const OriginPrice = showOriginPrice && (
-      <div class={bem('origin-price')}>
-        {slots('origin-price') || `${this.currency} ${this.originPrice}`}
-      </div>
-    );
+  const Footer = slots.footer && (
+    <div class={bem('footer')}>{slots.footer()}</div>
+  );
 
-    const Num = showNum && <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', { centered: this.centered })}>
-            {Title}
-            {Desc}
-            {slots('tags')}
-            <div class="van-card__bottom">
-              {Price}
-              {OriginPrice}
-              {Num}
-            </div>
+  return (
+    <div class={bem()} {...ctx.data}>
+      <div class={bem('header')}>
+        {Thumb}
+        <div class={bem('content', { centered: props.centered })}>
+          {Title}
+          {Desc}
+          {slots.tags && slots.tags()}
+          <div class="van-card__bottom">
+            {Price}
+            {OriginPrice}
+            {Num}
           </div>
         </div>
-        {Footer}
       </div>
-    );
+      {Footer}
+    </div>
+  );
+}
+
+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: '¥'
   }
-});
+};
+
+export default sfc(Card);

packages/card/zh-CN.md

@@ -58,6 +58,12 @@ Vue.use(Card);
 | thumb-link | 点击左侧图片后的跳转链接 | `String` | - | 1.3.4 |
 | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | `Boolean` | `false` | 1.5.0 |
 
+### Event
+
+| 事件名 | 说明 | 参数 |
+|------|------|------|
+| click | 点击时触发 | - |
+
 ### Slot
 
 | 名称 | 说明 |