diff --git a/packages/button/index.js b/packages/button/index.js
index 11944c04e..f8f824d38 100644
--- a/packages/button/index.js
+++ b/packages/button/index.js
@@ -3,70 +3,69 @@ import Loading from '../loading';
 
 const [sfc, bem] = use('button');
 
-export default sfc(
-  {
-    props: {
-      text: String,
-      block: Boolean,
-      plain: Boolean,
-      round: Boolean,
-      square: Boolean,
-      loading: Boolean,
-      disabled: Boolean,
-      nativeType: String,
-      bottomAction: Boolean,
-      tag: {
-        type: String,
-        default: 'button'
-      },
-      type: {
-        type: String,
-        default: 'default'
-      },
-      size: {
-        type: String,
-        default: 'normal'
-      }
+export default sfc({
+  functional: true,
+
+  props: {
+    text: String,
+    block: Boolean,
+    plain: Boolean,
+    round: Boolean,
+    square: Boolean,
+    loading: Boolean,
+    disabled: Boolean,
+    nativeType: String,
+    bottomAction: Boolean,
+    tag: {
+      type: String,
+      default: 'button'
     },
-
-    render(h, context, inherit) {
-      const { props, listeners } = context;
-      const { type, disabled, loading } = props;
-
-      const onClick = event => {
-        if (!loading && !disabled && listeners.click) {
-          listeners.click(event);
-        }
-      };
-
-      return (
-        <props.tag
-          type={props.nativeType}
-          disabled={disabled}
-          class={bem([
-            type,
-            props.size,
-            {
-              loading,
-              disabled,
-              block: props.block,
-              plain: props.plain,
-              round: props.round,
-              square: props.square,
-              'bottom-action': props.bottomAction
-            }
-          ])}
-          onClick={onClick}
-          {...inherit}
-        >
-          {loading ? (
-            <Loading size="20px" color={type === 'default' ? undefined : ''} />
-          ) : (
-            <span class={bem('text')}>{context.children || props.text}</span>
-          )}
-        </props.tag>
-      );
+    type: {
+      type: String,
+      default: 'default'
+    },
+    size: {
+      type: String,
+      default: 'normal'
     }
   },
-  true
-);
+
+  render(h, context, inherit) {
+    const { props, listeners } = context;
+    const { type, disabled, loading } = props;
+
+    const onClick = event => {
+      if (!loading && !disabled && listeners.click) {
+        listeners.click(event);
+      }
+    };
+
+    return (
+      <props.tag
+        type={props.nativeType}
+        disabled={disabled}
+        class={bem([
+          type,
+          props.size,
+          {
+            loading,
+            disabled,
+            block: props.block,
+            plain: props.plain,
+            round: props.round,
+            square: props.square,
+            'bottom-action': props.bottomAction
+          }
+        ])}
+        onClick={onClick}
+        {...inherit}
+      >
+        {loading ? (
+          <Loading size="20px" color={type === 'default' ? undefined : ''} />
+        ) : (
+          <span class={bem('text')}>{context.children || props.text}</span>
+        )}
+      </props.tag>
+    );
+  }
+});
diff --git a/packages/cell-group/index.js b/packages/cell-group/index.js
index d1a39d2c9..e80a2d503 100644
--- a/packages/cell-group/index.js
+++ b/packages/cell-group/index.js
@@ -2,25 +2,21 @@ import { use } from '../utils';
 
 const [sfc, bem] = use('cell-group');
 
-export default sfc(
-  {
-    props: {
-      border: {
-        type: Boolean,
-        default: true
-      }
-    },
+export default sfc({
+  functional: true,
 
-    render(h, context) {
-      return (
-        <div
-          class={[bem(), { 'van-hairline--top-bottom': context.props.border }]}
-          {...context.data}
-        >
-          {context.children}
-        </div>
-      );
+  props: {
+    border: {
+      type: Boolean,
+      default: true
     }
   },
-  true
-);
+
+  render(h, context) {
+    return (
+      <div class={[bem(), { 'van-hairline--top-bottom': context.props.border }]} {...context.data}>
+        {context.children}
+      </div>
+    );
+  }
+});
diff --git a/packages/contact-list/index.js b/packages/contact-list/index.js
index e3bc0cd2f..3b5ecaed7 100644
--- a/packages/contact-list/index.js
+++ b/packages/contact-list/index.js
@@ -7,57 +7,56 @@ import RadioGroup from '../radio-group';
 
 const [sfc, bem, t] = use('contact-list');
 
-export default sfc(
-  {
-    props: {
-      value: null,
-      list: Array,
-      addText: String
-    },
+export default sfc({
+  functional: true,
 
-    render(h, context, inherit) {
-      const { props, listeners } = context;
-
-      const List = props.list.map((item, index) => (
-        <Cell
-          key={item.id}
-          isLink
-          onClick={() => {
-            listeners.input && listeners.input(item.id);
-            listeners.select && listeners.select(item, index);
-          }}
-        >
-          <Radio name={item.id}>
-            <div class={bem('name')}>{`${item.name}，${item.tel}`}</div>
-          </Radio>
-          <Icon
-            slot="right-icon"
-            name="edit"
-            class={bem('edit')}
-            onClick={event => {
-              event.stopPropagation();
-              listeners.edit && listeners.edit(item, index);
-            }}
-          />
-        </Cell>
-      ));
-
-      return (
-        <div class={bem()} {...inherit}>
-          <RadioGroup value={props.value} class={bem('group')}>
-            {List}
-          </RadioGroup>
-          <Button
-            square
-            size="large"
-            type="danger"
-            class={bem('add')}
-            text={props.addText || t('addText')}
-            onClick={listeners.add || noop}
-          />
-        </div>
-      );
-    }
+  props: {
+    value: null,
+    list: Array,
+    addText: String
   },
-  true
-);
+
+  render(h, context, inherit) {
+    const { props, listeners } = context;
+
+    const List = props.list.map((item, index) => (
+      <Cell
+        key={item.id}
+        isLink
+        onClick={() => {
+          listeners.input && listeners.input(item.id);
+          listeners.select && listeners.select(item, index);
+        }}
+      >
+        <Radio name={item.id}>
+          <div class={bem('name')}>{`${item.name}，${item.tel}`}</div>
+        </Radio>
+        <Icon
+          slot="right-icon"
+          name="edit"
+          class={bem('edit')}
+          onClick={event => {
+            event.stopPropagation();
+            listeners.edit && listeners.edit(item, index);
+          }}
+        />
+      </Cell>
+    ));
+
+    return (
+      <div class={bem()} {...inherit}>
+        <RadioGroup value={props.value} class={bem('group')}>
+          {List}
+        </RadioGroup>
+        <Button
+          square
+          size="large"
+          type="danger"
+          class={bem('add')}
+          text={props.addText || t('addText')}
+          onClick={listeners.add || noop}
+        />
+      </div>
+    );
+  }
+});
diff --git a/packages/goods-action/index.js b/packages/goods-action/index.js
index d997bfe5f..d201ad9a7 100644
--- a/packages/goods-action/index.js
+++ b/packages/goods-action/index.js
@@ -2,15 +2,14 @@ import { use } from '../utils';
 
 const [sfc, bem] = use('goods-action');
 
-export default sfc(
-  {
-    render(h, context) {
-      return (
-        <div class={bem()} {...context.data}>
-          {context.children}
-        </div>
-      );
-    }
-  },
-  true
-);
+export default sfc({
+  functional: true,
+
+  render(h, context) {
+    return (
+      <div class={bem()} {...context.data}>
+        {context.children}
+      </div>
+    );
+  }
+});
diff --git a/packages/icon/index.js b/packages/icon/index.js
index b0b6a4ade..d7d7b9ec2 100644
--- a/packages/icon/index.js
+++ b/packages/icon/index.js
@@ -4,41 +4,40 @@ import isSrc from '../utils/validate/src';
 
 const [sfc] = use('icon');
 
-export default sfc(
-  {
-    props: {
-      name: String,
-      size: String,
-      color: String,
-      info: [String, Number],
-      classPrefix: {
-        type: String,
-        default: 'van-icon'
-      }
-    },
+export default sfc({
+  functional: true,
 
-    render(h, context) {
-      const { props } = context;
-      const urlIcon = isSrc(props.name);
-
-      return (
-        <i
-          class={[
-            props.classPrefix,
-            urlIcon ? 'van-icon--image' : `${props.classPrefix}-${props.name}`
-          ]}
-          style={{
-            color: props.color,
-            fontSize: props.size
-          }}
-          {...context.data}
-        >
-          {context.children}
-          {urlIcon && <img src={props.name} />}
-          <Info info={props.info} />
-        </i>
-      );
+  props: {
+    name: String,
+    size: String,
+    color: String,
+    info: [String, Number],
+    classPrefix: {
+      type: String,
+      default: 'van-icon'
     }
   },
-  true
-);
+
+  render(h, context) {
+    const { props } = context;
+    const urlIcon = isSrc(props.name);
+
+    return (
+      <i
+        class={[
+          props.classPrefix,
+          urlIcon ? 'van-icon--image' : `${props.classPrefix}-${props.name}`
+        ]}
+        style={{
+          color: props.color,
+          fontSize: props.size
+        }}
+        {...context.data}
+      >
+        {context.children}
+        {urlIcon && <img src={props.name} />}
+        <Info info={props.info} />
+      </i>
+    );
+  }
+});
diff --git a/packages/info/index.js b/packages/info/index.js
index e8bb3b5e6..e98c33bad 100644
--- a/packages/info/index.js
+++ b/packages/info/index.js
@@ -2,21 +2,20 @@ import { use, isDef } from '../utils';
 
 const [sfc, bem] = use('info');
 
-export default sfc(
-  {
-    props: {
-      info: [String, Number]
-    },
+export default sfc({
+  functional: true,
 
-    render(h, { props, data }) {
-      return (
-        isDef(props.info) && (
-          <div class={bem()} {...data}>
-            {props.info}
-          </div>
-        )
-      );
-    }
+  props: {
+    info: [String, Number]
   },
-  true
-);
+
+  render(h, { props, data }) {
+    return (
+      isDef(props.info) && (
+        <div class={bem()} {...data}>
+          {props.info}
+        </div>
+      )
+    );
+  }
+});
diff --git a/packages/loading/index.js b/packages/loading/index.js
index f11dd9027..9c038242a 100644
--- a/packages/loading/index.js
+++ b/packages/loading/index.js
@@ -3,53 +3,52 @@ import { use } from '../utils';
 const [sfc, bem] = use('loading');
 const DEFAULT_COLOR = '#c9c9c9';
 
-export default sfc(
-  {
-    props: {
-      size: String,
-      type: {
-        type: String,
-        default: 'circular'
-      },
-      color: {
-        type: String,
-        default: DEFAULT_COLOR
-      }
+export default sfc({
+  functional: true,
+
+  props: {
+    size: String,
+    type: {
+      type: String,
+      default: 'circular'
     },
-
-    render(h, context) {
-      const { color, size, type } = context.props;
-
-      const colorType = color === 'white' || color === 'black' ? color : '';
-
-      const style = {
-        color: color === 'black' ? DEFAULT_COLOR : color,
-        width: size,
-        height: size
-      };
-
-      const Spin = [];
-      if (type === 'spinner') {
-        for (let i = 0; i < 12; i++) {
-          Spin.push(<i />);
-        }
-      }
-
-      const Circular = type === 'circular' && (
-        <svg class={bem('circular')} viewBox="25 25 50 50">
-          <circle cx="50" cy="50" r="20" fill="none" />
-        </svg>
-      );
-
-      return (
-        <div class={bem([type, colorType])} style={style} {...context.data}>
-          <span class={bem('spinner', type)}>
-            {Spin}
-            {Circular}
-          </span>
-        </div>
-      );
+    color: {
+      type: String,
+      default: DEFAULT_COLOR
     }
   },
-  true
-);
+
+  render(h, context) {
+    const { color, size, type } = context.props;
+
+    const colorType = color === 'white' || color === 'black' ? color : '';
+
+    const style = {
+      color: color === 'black' ? DEFAULT_COLOR : color,
+      width: size,
+      height: size
+    };
+
+    const Spin = [];
+    if (type === 'spinner') {
+      for (let i = 0; i < 12; i++) {
+        Spin.push(<i />);
+      }
+    }
+
+    const Circular = type === 'circular' && (
+      <svg class={bem('circular')} viewBox="25 25 50 50">
+        <circle cx="50" cy="50" r="20" fill="none" />
+      </svg>
+    );
+
+    return (
+      <div class={bem([type, colorType])} style={style} {...context.data}>
+        <span class={bem('spinner', type)}>
+          {Spin}
+          {Circular}
+        </span>
+      </div>
+    );
+  }
+});
diff --git a/packages/nav-bar/index.js b/packages/nav-bar/index.js
index 945738627..bc2f04089 100644
--- a/packages/nav-bar/index.js
+++ b/packages/nav-bar/index.js
@@ -3,53 +3,46 @@ import Icon from '../icon';
 
 const [sfc, bem] = use('nav-bar');
 
-export default sfc(
-  {
-    props: {
-      title: String,
-      fixed: Boolean,
-      leftText: String,
-      rightText: String,
-      leftArrow: Boolean,
-      border: {
-        type: Boolean,
-        default: true
-      },
-      zIndex: {
-        type: Number,
-        default: 1
-      }
+export default sfc({
+  functional: true,
+
+  props: {
+    title: String,
+    fixed: Boolean,
+    leftText: String,
+    rightText: String,
+    leftArrow: Boolean,
+    border: {
+      type: Boolean,
+      default: true
     },
-
-    render(h, context, inherit) {
-      const { props, listeners } = context;
-      const slots = context.slots();
-
-      return (
-        <div
-          class={[bem({ fixed: props.fixed }), { 'van-hairline--bottom': props.border }]}
-          style={{ zIndex: props.zIndex }}
-          {...inherit}
-        >
-          <div
-            class={bem('left')}
-            onClick={listeners['click-left'] || noop}
-          >
-            {slots.left || [
-              props.leftArrow && <Icon class={bem('arrow')} name="arrow-left" />,
-              props.leftText && <span class={bem('text')}>{props.leftText}</span>
-            ]}
-          </div>
-          <div class={[bem('title'), 'van-ellipsis']}>{slots.title || props.title}</div>
-          <div
-            class={bem('right')}
-            onClick={listeners['click-right'] || noop}
-          >
-            {slots.right || (props.rightText && <span class={bem('text')}>{props.rightText}</span>)}
-          </div>
-        </div>
-      );
+    zIndex: {
+      type: Number,
+      default: 1
     }
   },
-  true
-);
+
+  render(h, context, inherit) {
+    const { props, listeners } = context;
+    const slots = context.slots();
+
+    return (
+      <div
+        class={[bem({ fixed: props.fixed }), { 'van-hairline--bottom': props.border }]}
+        style={{ zIndex: props.zIndex }}
+        {...inherit}
+      >
+        <div class={bem('left')} onClick={listeners['click-left'] || noop}>
+          {slots.left || [
+            props.leftArrow && <Icon class={bem('arrow')} name="arrow-left" />,
+            props.leftText && <span class={bem('text')}>{props.leftText}</span>
+          ]}
+        </div>
+        <div class={[bem('title'), 'van-ellipsis']}>{slots.title || props.title}</div>
+        <div class={bem('right')} onClick={listeners['click-right'] || noop}>
+          {slots.right || (props.rightText && <span class={bem('text')}>{props.rightText}</span>)}
+        </div>
+      </div>
+    );
+  }
+});
diff --git a/packages/panel/index.js b/packages/panel/index.js
index a0c03c61d..9251fcafb 100644
--- a/packages/panel/index.js
+++ b/packages/panel/index.js
@@ -4,35 +4,34 @@ import CellGroup from '../cell-group';
 
 const [sfc, bem] = use('panel');
 
-export default sfc(
-  {
-    props: {
-      icon: String,
-      desc: String,
-      title: String,
-      status: String
-    },
+export default sfc({
+  functional: true,
 
-    render(h, context) {
-      const { props } = context;
-      const slots = context.slots();
-
-      return (
-        <CellGroup class={bem()} {...context.data}>
-          {slots.header || (
-            <Cell
-              class={bem('header')}
-              icon={props.icon}
-              label={props.desc}
-              title={props.title}
-              value={props.status}
-            />
-          )}
-          <div class={bem('content')}>{slots.default}</div>
-          {slots.footer && <div class={[bem('footer'), 'van-hairline--top']}>{slots.footer}</div>}
-        </CellGroup>
-      );
-    }
+  props: {
+    icon: String,
+    desc: String,
+    title: String,
+    status: String
   },
-  true
-);
+
+  render(h, context) {
+    const { props } = context;
+    const slots = context.slots();
+
+    return (
+      <CellGroup class={bem()} {...context.data}>
+        {slots.header || (
+          <Cell
+            class={bem('header')}
+            icon={props.icon}
+            label={props.desc}
+            title={props.title}
+            value={props.status}
+          />
+        )}
+        <div class={bem('content')}>{slots.default}</div>
+        {slots.footer && <div class={[bem('footer'), 'van-hairline--top']}>{slots.footer}</div>}
+      </CellGroup>
+    );
+  }
+});
diff --git a/packages/password-input/index.js b/packages/password-input/index.js
index 147a498e8..5a109c356 100644
--- a/packages/password-input/index.js
+++ b/packages/password-input/index.js
@@ -2,50 +2,49 @@ import { use } from '../utils';
 
 const [sfc, bem] = use('password-input');
 
-export default sfc(
-  {
-    props: {
-      info: String,
-      errorInfo: String,
-      value: {
-        type: String,
-        default: ''
-      },
-      length: {
-        type: Number,
-        default: 6
-      }
+export default sfc({
+  functional: true,
+
+  props: {
+    info: String,
+    errorInfo: String,
+    value: {
+      type: String,
+      default: ''
     },
-
-    render(h, context) {
-      const { props, listeners } = context;
-      const info = props.errorInfo || props.info;
-
-      const Points = [];
-      for (let i = 0; i < props.length; i++) {
-        Points.push(
-          <li class="van-hairline">
-            <i style={{ visibility: props.value[i] ? 'visible' : 'hidden' }} />
-          </li>
-        );
-      }
-
-      return (
-        <div class={bem()}>
-          <ul
-            class={[bem('security'), 'van-hairline--surround']}
-            onTouchstart={event => {
-              event.stopPropagation();
-              listeners.focus && listeners.focus();
-            }}
-            {...context.data}
-          >
-            {Points}
-          </ul>
-          {info && <div class={bem(props.errorInfo ? 'error-info' : 'info')}>{info}</div>}
-        </div>
-      );
+    length: {
+      type: Number,
+      default: 6
     }
   },
-  true
-);
+
+  render(h, context) {
+    const { props, listeners } = context;
+    const info = props.errorInfo || props.info;
+
+    const Points = [];
+    for (let i = 0; i < props.length; i++) {
+      Points.push(
+        <li class="van-hairline">
+          <i style={{ visibility: props.value[i] ? 'visible' : 'hidden' }} />
+        </li>
+      );
+    }
+
+    return (
+      <div class={bem()}>
+        <ul
+          class={[bem('security'), 'van-hairline--surround']}
+          onTouchstart={event => {
+            event.stopPropagation();
+            listeners.focus && listeners.focus();
+          }}
+          {...context.data}
+        >
+          {Points}
+        </ul>
+        {info && <div class={bem(props.errorInfo ? 'error-info' : 'info')}>{info}</div>}
+      </div>
+    );
+  }
+});
diff --git a/packages/submit-bar/index.js b/packages/submit-bar/index.js
index eeb6bd1ae..7210fc77b 100644
--- a/packages/submit-bar/index.js
+++ b/packages/submit-bar/index.js
@@ -3,64 +3,63 @@ import Button from '../button';
 
 const [sfc, bem, t] = use('submit-bar');
 
-export default sfc(
-  {
-    props: {
-      tip: String,
-      label: String,
-      loading: Boolean,
-      disabled: Boolean,
-      buttonText: String,
-      price: {
-        type: Number,
-        default: null
-      },
-      currency: {
-        type: String,
-        default: '¥'
-      },
-      buttonType: {
-        type: String,
-        default: 'danger'
-      }
+export default sfc({
+  functional: true,
+
+  props: {
+    tip: String,
+    label: String,
+    loading: Boolean,
+    disabled: Boolean,
+    buttonText: String,
+    price: {
+      type: Number,
+      default: null
     },
-
-    render(h, context, inherit) {
-      const { props, listeners } = context;
-      const { tip, price } = props;
-      const slots = context.slots();
-      const hasPrice = typeof price === 'number';
-
-      return (
-        <div class={bem()} {...inherit}>
-          {slots.top}
-          {(slots.tip || tip) && (
-            <div class={bem('tip')}>
-              {tip}
-              {slots.tip}
-            </div>
-          )}
-          <div class={bem('bar')}>
-            {slots.default}
-            <div class={bem('text')}>
-              {hasPrice && [
-                <span>{props.label || t('label')}</span>,
-                <span class={bem('price')}>{`${props.currency} ${(price / 100).toFixed(2)}`}</span>
-              ]}
-            </div>
-            <Button
-              square
-              size="large"
-              type={props.buttonType}
-              loading={props.loading}
-              disabled={props.disabled}
-              text={props.loading ? '' : props.buttonText}
-              onClick={listeners.submit || noop}
-            />
-          </div>
-        </div>
-      );
+    currency: {
+      type: String,
+      default: '¥'
+    },
+    buttonType: {
+      type: String,
+      default: 'danger'
     }
   },
-  true
-);
+
+  render(h, context, inherit) {
+    const { props, listeners } = context;
+    const { tip, price } = props;
+    const slots = context.slots();
+    const hasPrice = typeof price === 'number';
+
+    return (
+      <div class={bem()} {...inherit}>
+        {slots.top}
+        {(slots.tip || tip) && (
+          <div class={bem('tip')}>
+            {tip}
+            {slots.tip}
+          </div>
+        )}
+        <div class={bem('bar')}>
+          {slots.default}
+          <div class={bem('text')}>
+            {hasPrice && [
+              <span>{props.label || t('label')}</span>,
+              <span class={bem('price')}>{`${props.currency} ${(price / 100).toFixed(2)}`}</span>
+            ]}
+          </div>
+          <Button
+            square
+            size="large"
+            type={props.buttonType}
+            loading={props.loading}
+            disabled={props.disabled}
+            text={props.loading ? '' : props.buttonText}
+            onClick={listeners.submit || noop}
+          />
+        </div>
+      </div>
+    );
+  }
+});
diff --git a/packages/switch-cell/index.js b/packages/switch-cell/index.js
index 8533b7e09..4db47370f 100644
--- a/packages/switch-cell/index.js
+++ b/packages/switch-cell/index.js
@@ -5,34 +5,27 @@ import SwitchMixin from '../mixins/switch';
 
 const [sfc, bem] = use('switch-cell');
 
-export default sfc(
-  {
-    mixins: [SwitchMixin],
+export default sfc({
+  functional: true,
 
-    props: {
-      title: String,
-      border: Boolean,
-      size: {
-        type: String,
-        default: '24px'
-      }
-    },
+  mixins: [SwitchMixin],
 
-    render(h, context, inherit) {
-      const { props } = context;
-
-      return (
-        <Cell
-          center
-          title={props.title}
-          border={props.border}
-          class={bem()}
-          {...inherit}
-        >
-          <Switch {...{ props, on: context.listeners }} />
-        </Cell>
-      );
+  props: {
+    title: String,
+    border: Boolean,
+    size: {
+      type: String,
+      default: '24px'
     }
   },
-  true
-);
+
+  render(h, context, inherit) {
+    const { props } = context;
+
+    return (
+      <Cell center title={props.title} border={props.border} class={bem()} {...inherit}>
+        <Switch {...{ props, on: context.listeners }} />
+      </Cell>
+    );
+  }
+});
diff --git a/packages/tag/index.js b/packages/tag/index.js
index 51d433534..18e5efc0b 100644
--- a/packages/tag/index.js
+++ b/packages/tag/index.js
@@ -9,45 +9,44 @@ const COLOR_MAP = {
   success: GREEN
 };
 
-export default sfc(
-  {
-    props: {
-      size: String,
-      type: String,
-      mark: Boolean,
-      color: String,
-      plain: Boolean,
-      round: Boolean,
-      textColor: String
-    },
+export default sfc({
+  functional: true,
 
-    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>
-      );
-    }
+  props: {
+    size: String,
+    type: String,
+    mark: Boolean,
+    color: String,
+    plain: Boolean,
+    round: Boolean,
+    textColor: String
   },
-  true
-);
+
+  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>
+    );
+  }
+});
diff --git a/packages/utils/use/sfc.js b/packages/utils/use/sfc.js
index 183a392b7..10ea2dfbe 100644
--- a/packages/utils/use/sfc.js
+++ b/packages/utils/use/sfc.js
@@ -36,7 +36,6 @@ const mapInheritKey = { nativeOn: 'on' };
 
 function functional(sfc) {
   const { render } = sfc;
-  sfc.functional = true;
   sfc.render = (h, context) => {
     const inherit = inheritKey.reduce((obj, key) => {
       if (context.data[key]) {
@@ -48,7 +47,7 @@ function functional(sfc) {
   };
 }
 
-export default name => (sfc, isFunctional) => {
+export default name => sfc => {
   sfc.name = name;
   sfc.install = install;
   sfc.mixins = sfc.mixins || [];
@@ -58,7 +57,7 @@ export default name => (sfc, isFunctional) => {
     defaultProps(sfc.props);
   }
 
-  if (isFunctional) {
+  if (sfc.functional) {
     functional(sfc);
   }