functional: CellGroup, Icon, Info, Loading, GoodsAction (#2674)

packages/cell-group/index.js

@@ -2,7 +2,8 @@ import { use } from '../utils';
 
 const [sfc, bem] = use('cell-group');
 
-export default sfc({
+export default sfc(
+  {
     props: {
       border: {
         type: Boolean,
@@ -10,11 +11,16 @@ export default sfc({
       }
     },
 
-  render(h) {
+    render(h, context) {
       return (
-      <div class={[bem(), { 'van-hairline--top-bottom': this.border }]}>
-        {this.$slots.default}
+        <div
+          class={[bem(), { 'van-hairline--top-bottom': context.props.border }]}
+          {...context.data}
+        >
+          {context.children}
         </div>
       );
     }
-});
+  },
+  true
+);

packages/goods-action/index.js

@@ -2,8 +2,15 @@ import { use } from '../utils';
 
 const [sfc, bem] = use('goods-action');
 
-export default sfc({
-  render(h) {
-    return <div class={bem()}>{this.$slots.default}</div>;
+export default sfc(
+  {
+    render(h, context) {
+      return (
+        <div class={bem()} {...context.data}>
+          {context.children}
+        </div>
+      );
     }
-});
+  },
+  true
+);

packages/icon/index.js

@@ -4,7 +4,8 @@ import isSrc from '../utils/validate/src';
 
 const [sfc] = use('icon');
 
-export default sfc({
+export default sfc(
+  {
     props: {
       name: String,
       size: String,
@@ -16,29 +17,28 @@ export default sfc({
       }
     },
 
-  computed: {
-    isSrc() {
-      return isSrc(this.name);
-    }
-  },
+    render(h, context) {
+      const { props } = context;
+      const urlIcon = isSrc(props.name);
 
-  render(h) {
       return (
         <i
           class={[
-          this.classPrefix,
-          this.isSrc ? 'van-icon--image' : `${this.classPrefix}-${this.name}`
+            props.classPrefix,
+            urlIcon ? 'van-icon--image' : `${props.classPrefix}-${props.name}`
           ]}
           style={{
-          color: this.color,
-          fontSize: this.size
+            color: props.color,
+            fontSize: props.size
           }}
-        {...{ on: this.$listeners }}
+          {...context.data}
         >
-        {this.$slots.default}
-        {this.isSrc && <img src={this.name} />}
-        <Info info={this.info} />
+          {context.children}
+          {urlIcon && <img src={props.name} />}
+          <Info info={props.info} />
         </i>
       );
     }
-});
+  },
+  true
+);

packages/info/index.js

@@ -2,12 +2,21 @@ import { use, isDef } from '../utils';
 
 const [sfc, bem] = use('info');
 
-export default sfc({
+export default sfc(
+  {
     props: {
       info: [String, Number]
     },
 
-  render(h) {
-    return isDef(this.info) && <div class={bem()}>{this.info}</div>;
+    render(h, { props, data }) {
+      return (
+        isDef(props.info) && (
+          <div class={bem()} {...data}>
+            {props.info}
+          </div>
+        )
+      );
     }
-});
+  },
+  true
+);

packages/loading/index.js

@@ -3,7 +3,8 @@ import { use } from '../utils';
 const [sfc, bem] = use('loading');
 const DEFAULT_COLOR = '#c9c9c9';
 
-export default sfc({
+export default sfc(
+  {
     props: {
       size: String,
       type: {
@@ -16,8 +17,8 @@ export default sfc({
       }
     },
 
-  render(h) {
-    const { color, size, type } = this;
+    render(h, context) {
+      const { color, size, type } = context.props;
 
       const colorType = color === 'white' || color === 'black' ? color : '';
 
@@ -41,7 +42,7 @@ export default sfc({
       );
 
       return (
-      <div class={bem([type, colorType])} style={style}>
+        <div class={bem([type, colorType])} style={style} {...context.data}>
           <span class={bem('spinner', type)}>
             {Spin}
             {Circular}
@@ -49,4 +50,6 @@ export default sfc({
         </div>
       );
     }
-});
+  },
+  true
+);

packages/utils/use/sfc.js

@@ -30,10 +30,17 @@ function install(Vue) {
   Vue.component((camelize(`-${name}`)), this);
 }
 
-export default name => sfc => {
+export default name => (sfc, functional) => {
   sfc.name = name;
   sfc.install = install;
-  sfc.props && defaultProps(sfc.props);
+
+  if (sfc.props) {
+    defaultProps(sfc.props);
+  }
+
+  if (functional) {
+    sfc.functional = true;
+  }
 
   return sfc;
 };