[improvement] Functional: button (#2676)

packages/button/index.js

@@ -3,65 +3,70 @@ 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'
-    }
-  },
-
-  methods: {
-    onClick(event) {
-      if (!this.loading && !this.disabled) {
-        this.$emit('click', event);
+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'
       }
+    },
+
+    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>
+      );
     }
   },
-
-  render(h) {
-    return (
-      <this.tag
-        type={this.nativeType}
-        disabled={this.disabled}
-        class={bem([
-          this.type,
-          this.size,
-          {
-            block: this.block,
-            plain: this.plain,
-            round: this.round,
-            square: this.square,
-            loading: this.loading,
-            disabled: this.disabled,
-            'bottom-action': this.bottomAction
-          }
-        ])}
-        onClick={this.onClick}
-      >
-        {this.loading ? (
-          <Loading size="20px" color={this.type === 'default' ? undefined : ''} />
-        ) : (
-          <span class={bem('text')}>{this.$slots.default || this.text}</span>
-        )}
-      </this.tag>
-    );
-  }
-});
+  true
+);