refactor(Switch): use setup

src/switch/index.js

@@ -15,57 +15,49 @@ export default createComponent({
 
   props: switchProps,
 
-  emits: ['click', 'change', 'update:modelValue'],
+  emits: ['change', 'update:modelValue'],
 
-  computed: {
+  setup(props, { emit }) {
-    checked() {
+    const isChecked = () => props.modelValue === props.activeValue;
-      return this.modelValue === this.activeValue;
-    },
 
-    style() {
+    const onClick = () => {
-      return {
+      if (!props.disabled && !props.loading) {
-        fontSize: addUnit(this.size),
+        const newValue = isChecked() ? props.inactiveValue : props.activeValue;
-        backgroundColor: this.checked ? this.activeColor : this.inactiveColor,
+        emit('update:modelValue', newValue);
-      };
+        emit('change', newValue);
-    },
-  },
-
-  methods: {
-    onClick(event) {
-      this.$emit('click', event);
-
-      if (!this.disabled && !this.loading) {
-        const newValue = this.checked ? this.inactiveValue : this.activeValue;
-        this.$emit('update:modelValue', newValue);
-        this.$emit('change', newValue);
       }
-    },
+    };
 
-    genLoading() {
+    const renderLoading = () => {
-      if (this.loading) {
+      if (props.loading) {
-        const color = this.checked ? this.activeColor : this.inactiveColor;
+        const color = isChecked() ? props.activeColor : props.inactiveColor;
         return <Loading class={bem('loading')} color={color} />;
       }
-    },
+    };
-  },
 
-  render() {
+    return () => {
-    const { checked, loading, disabled } = this;
+      const { size, loading, disabled, activeColor, inactiveColor } = props;
+      const checked = isChecked();
+      const style = {
+        fontSize: addUnit(size),
+        backgroundColor: checked ? activeColor : inactiveColor,
+      };
 
       return (
         <div
+          role="switch"
           class={bem({
             on: checked,
             loading,
             disabled,
           })}
-        role="switch"
+          style={style}
-        style={this.style}
           aria-checked={String(checked)}
-        onClick={this.onClick}
+          onClick={onClick}
         >
-        <div class={bem('node')}>{this.genLoading()}</div>
+          <div class={bem('node')}>{renderLoading()}</div>
         </div>
       );
+    };
   },
 });