[Improvement] Switch: support custom size (#723)

packages/field/index.vue

@@ -127,6 +127,10 @@ export default create({
       }
 
       const el = this.$refs.textarea;
+      if (!el) {
+        return;
+      }
+
       el.style.height = 'auto';
 
       let height = el.scrollHeight;

packages/switch/index.vue

@@ -1,9 +1,16 @@
 <template>
-  <div class="van-switch" :class="[`van-switch--${value ? 'on' : 'off'}`, { 'van-switch--disabled': disabled }]" @click="toggleState">
-    <div class="van-switch__node van-hairline-surround">
+  <div
+    class="van-switch"
+    :class="[{
+      'van-switch--on': value,
+      'van-switch--disabled': disabled
+    }]"
+    :style="style"
+    @click="onClick"
+  >
+    <div class="van-switch__node">
       <loading v-if="loading" class="van-switch__loading" />
     </div>
-    <div class="van-switch__bg" />
   </div>
 </template>
 
@@ -16,11 +23,23 @@ export default create({
   props: {
     value: Boolean,
     loading: Boolean,
-    disabled: Boolean
+    disabled: Boolean,
+    size: {
+      type: String,
+      default: '30px'
+    }
+  },
+
+  computed: {
+    style() {
+      return {
+        fontSize: this.size
+      };
+    }
   },
 
   methods: {
-    toggleState() {
+    onClick() {
       if (!this.disabled && !this.loading) {
         this.$emit('input', !this.value);
         this.$emit('change', !this.value);

packages/vant-css/src/switch.css

@@ -1,59 +1,44 @@
 @import './common/var.css';
 
 .van-switch {
-  height: 33px;
-  width: 53px;
+  height: 1em;
+  width: 1.6em;
   display: inline-block;
   position: relative;
   background: $white;
   border-radius: 16px;
-  box-sizing: border-box;
+  box-sizing: content-box;
   border: 1px solid rgba(0, 0, 0, .1);
-  border-radius: 32px;
+  border-radius: 1em;
 
   &__node {
-    width: 30px;
-    height: 30px;
-    border-radius: 13.5px;
-    background-color: $white;
-    position: absolute;
-    box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
-    left: 0;
     top: 0;
-    z-index: 2;
-    transition: transform .3s;
-
-    &::after {
-      border-color: rgba(0, 0, 0, .1);
-      border-radius: 27px;
-    }
+    left: 0;
+    z-index: 1;
+    width: 1em;
+    height: 1em;
+    transition: .3s;
+    position: absolute;
+    border-radius: 100%;
+    background-color: $white;
+    box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
   }
 
   &__loading {
-    top: 50%;
-    left: 50%;
-    width: 16px;
-    height: 16px;
-    transform: translate3d(-50%, -50%, 0);
+    top: 25%;
+    left: 25%;
+    width: 50%;
+    height: 50%;
   }
 
   &--on {
     background-color: #44db5e;
 
-    &::after {
-      border-color: #44db5e;
-    }
-
     .van-switch__node {
-      transform: translateX(21px);
+      transform: translateX(.6em);
     }
   }
 
-  &--off {
-    background-color: $white;
-    border-color: rgba(0, 0, 0, .1);
-  }
-
   &--disabled {
     opacity: .4;
   }