refactor(Button): use setup

src/button/index.js

@@ -46,103 +46,127 @@ 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 = [];
+        <Loading
+          class={bem('loading')}
+          size={props.loadingSize}
+          type={props.loadingType}
+          color="currentColor"
+        />
+      );
+    };
 
-      if (this.loading) {
+    const renderIcon = () => {
-        Content.push(
+      if (props.loading) {
-          this.$slots.loading ? (
+        return renderLoadingIcon();
-            this.$slots.loading()
+      }
-          ) : (
+
-            <Loading
+      if (props.icon) {
-              class={bem('loading')}
+        return (
-              size={this.loadingSize}
-              type={this.loadingType}
-              color="currentColor"
-            />
-          )
-        );
-      } else if (this.icon) {
-        Content.push(
           <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) {
+        const style = {};
 
-  render() {
+        style.color = plain ? color : WHITE;
-    const { tag, type, color, plain, disabled, loading, hairline } = this;
 
-    const style = {};
+        if (!plain) {
+          // Use background instead of backgroundColor to make linear-gradient work
+          style.background = color;
+        }
 
-    if (color) {
+        // hide border when color is linear-gradient
-      style.color = plain ? color : WHITE;
+        if (color.indexOf('gradient') !== -1) {
+          style.border = 0;
+        } else {
+          style.borderColor = color;
+        }
 
-      if (!plain) {
+        return style;
-        // Use background instead of backgroundColor to make linear-gradient work
-        style.background = color;
       }
+    };
 
-      // hide border when color is linear-gradient
+    return (vm) => {
-      if (color.indexOf('gradient') !== -1) {
+      const {
-        style.border = 0;
+        tag,
-      } else {
-        style.borderColor = color;
-      }
-    }
-
-    const classes = [
-      bem([
         type,
-        this.size,
+        size,
-        {
+        block,
-          plain,
+        round,
-          loading,
+        plain,
-          disabled,
+        square,
-          hairline,
+        loading,
-          block: this.block,
+        disabled,
-          round: this.round,
+        hairline,
-          square: this.square,
+        nativeType,
-        },
+      } = props;
-      ]),
-      { [BORDER_SURROUND]: hairline },
-    ];
 
-    return (
+      const onClick = () => {
-      <tag
+        if (!loading && !disabled) {
-        style={style}
+          emit('click', event);
-        class={classes}
+          route(vm.$router, vm);
-        type={this.nativeType}
+        }
-        disabled={disabled}
+      };
-        onClick={this.onClick}
+
-      >
+      const classes = [
-        <div class={bem('content')}>{this.genContent()}</div>
+        bem([
-      </tag>
+          type,
-    );
+          size,
+          {
+            plain,
+            block,
+            round,
+            square,
+            loading,
+            disabled,
+            hairline,
+          },
+        ]),
+        { [BORDER_SURROUND]: hairline },
+      ];
+
+      return (
+        <tag
+          type={nativeType}
+          class={classes}
+          style={getStyle()}
+          disabled={disabled}
+          onClick={onClick}
+        >
+          <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);
       }