[improvement] Functional components be just functions (#2735)

packages/tag/index.js

@@ -9,44 +9,41 @@ const COLOR_MAP = {
   success: GREEN
 };
 
-export default sfc({
-  functional: true,
+function Tag(h, props, slots, ctx) {
+  const { mark, plain, round, size } = ctx.props;
 
-  props: {
-    size: String,
-    type: String,
-    mark: Boolean,
-    color: String,
-    plain: Boolean,
-    round: Boolean,
-    textColor: String
-  },
+  const color = props.color || COLOR_MAP[props.type] || GRAY_DARK;
+  const key = plain ? 'color' : 'backgroundColor';
+  const style = { [key]: color };
 
-  render(h, context) {
-    const { props } = context;
-    const { mark, plain, round, size } = context.props;
-
-    const color = props.color || COLOR_MAP[props.type] || GRAY_DARK;
-    const key = plain ? 'color' : 'backgroundColor';
-    const style = { [key]: color };
-
-    if (props.textColor) {
-      style.color = props.textColor;
-    }
-
-    return (
-      <span
-        style={style}
-        class={[
-          bem({ mark, plain, round, [size]: size }),
-          {
-            'van-hairline--surround': plain
-          }
-        ]}
-        {...context.data}
-      >
-        {context.children}
-      </span>
-    );
+  if (props.textColor) {
+    style.color = props.textColor;
   }
-});
+
+  return (
+    <span
+      style={style}
+      class={[
+        bem({ mark, plain, round, [size]: size }),
+        {
+          'van-hairline--surround': plain
+        }
+      ]}
+      {...ctx.data}
+    >
+      {slots.default && slots.default()}
+    </span>
+  );
+}
+
+Tag.props = {
+  size: String,
+  type: String,
+  mark: Boolean,
+  color: String,
+  plain: Boolean,
+  round: Boolean,
+  textColor: String
+};
+
+export default sfc(Tag);