refactor(Button): use setup

src/button/index.js

@@ -46,61 +46,56 @@ export default createComponent({
 
   emits: ['click'],
 
-  methods: {
+  setup(props, { emit, slots }) {
-    onClick() {
+    const renderLoadingIcon = () => {
-      if (!this.loading && !this.disabled) {
+      if (slots.loading) {
-        this.$emit('click', event);
+        return slots.loading();
-        route(this.$router, this);
       }
-    },
 
-    genContent() {
+      return (
-      const Content = [];
-
-      if (this.loading) {
-        Content.push(
-          this.$slots.loading ? (
-            this.$slots.loading()
-          ) : (
         <Loading
           class={bem('loading')}
-              size={this.loadingSize}
+          size={props.loadingSize}
-              type={this.loadingType}
+          type={props.loadingType}
           color="currentColor"
         />
-          )
       );
-      } else if (this.icon) {
+    };
-        Content.push(
+
+    const renderIcon = () => {
+      if (props.loading) {
+        return renderLoadingIcon();
+      }
+
+      if (props.icon) {
+        return (
           <Icon
-            name={this.icon}
+            name={props.icon}
             class={bem('icon')}
-            classPrefix={this.iconPrefix}
+            classPrefix={props.iconPrefix}
           />
         );
       }
+    };
 
+    const renderText = () => {
       let text;
-      if (this.loading) {
+      if (props.loading) {
-        text = this.loadingText;
+        text = props.loadingText;
       } else {
-        text = this.$slots.default ? this.$slots.default() : this.text;
+        text = slots.default ? slots.default() : props.text;
       }
 
       if (text) {
-        Content.push(<span class={bem('text')}>{text}</span>);
+        return <span class={bem('text')}>{text}</span>;
       }
+    };
 
-      return Content;
+    const getStyle = () => {
-    },
+      const { color, plain } = props;
-  },
+      if (color) {
-
-  render() {
-    const { tag, type, color, plain, disabled, loading, hairline } = this;
-
         const style = {};
 
-    if (color) {
         style.color = plain ? color : WHITE;
 
         if (!plain) {
@@ -114,20 +109,45 @@ export default createComponent({
         } else {
           style.borderColor = color;
         }
+
+        return style;
       }
+    };
+
+    return (vm) => {
+      const {
+        tag,
+        type,
+        size,
+        block,
+        round,
+        plain,
+        square,
+        loading,
+        disabled,
+        hairline,
+        nativeType,
+      } = props;
+
+      const onClick = () => {
+        if (!loading && !disabled) {
+          emit('click', event);
+          route(vm.$router, vm);
+        }
+      };
 
       const classes = [
         bem([
           type,
-        this.size,
+          size,
           {
             plain,
+            block,
+            round,
+            square,
             loading,
             disabled,
             hairline,
-          block: this.block,
-          round: this.round,
-          square: this.square,
           },
         ]),
         { [BORDER_SURROUND]: hairline },
@@ -135,14 +155,18 @@ export default createComponent({
 
       return (
         <tag
-        style={style}
+          type={nativeType}
           class={classes}
-        type={this.nativeType}
+          style={getStyle()}
           disabled={disabled}
-        onClick={this.onClick}
+          onClick={onClick}
         >
-        <div class={bem('content')}>{this.genContent()}</div>
+          <div class={bem('content')}>
+            {renderIcon()}
+            {renderText()}
+          </div>
         </tag>
       );
+    };
   },
 });

src/picker/index.js

@@ -14,14 +14,14 @@ const [createComponent, bem, t] = createNamespace('picker');
 export default createComponent({
   props: {
     ...pickerProps,
-    defaultIndex: {
-      type: [Number, String],
-      default: 0,
-    },
     columns: {
       type: Array,
       default: () => [],
     },
+    defaultIndex: {
+      type: [Number, String],
+      default: 0,
+    },
     toolbarPosition: {
       type: String,
       default: 'top',
@@ -135,11 +135,7 @@ export default createComponent({
       }
 
       if (this.dataType === 'text') {
-        this.$emit(
+        this.$emit('change', this.getColumnValue(0), this.getColumnIndex(0));
-          'change',
-          this.getColumnValue(0),
-          this.getColumnIndex(0)
-        );
       } else {
         this.$emit('change', this.getValues(), columnIndex);
       }