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

docs/demos/views/address-edit.vue

@@ -26,7 +26,7 @@ export default {
         name: '黄龙万科中心',
         address: '杭州市西湖区'
       }, {
-        name: '黄龙万科中心H座'
+        name: '黄龙万科中心G座'
       }, {
         name: '黄龙万科中心H座',
         address: '杭州市西湖区'
@@ -34,12 +34,12 @@ export default {
     },
     'en-US': {
       searchResult: [{
-        name: 'Name',
+        name: 'Name1',
         address: 'Address'
       }, {
-        name: 'Name'
+        name: 'Name2'
       }, {
-        name: 'Name',
+        name: 'Name3',
         address: 'Address'
       }]
     }

docs/demos/views/switch.vue

@@ -13,7 +13,7 @@
     </demo-block>
 
     <demo-block :title="$t('advancedUsage')">
-      <van-switch :value="checked2" @input="onInput" />
+      <van-switch :value="checked2" size="36px" @input="onInput" />
     </demo-block>
   </demo-section>
 </template>

docs/markdown/en-US/switch.md

@@ -41,7 +41,7 @@ export default {
 #### Advanced usage
 
 ```html
-<van-switch :value="checked" @input="onInput" />
+<van-switch :value="checked" size="36px" @input="onInput" />
 ```
 
 ```js
@@ -71,7 +71,8 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | v-model | Check status of Switch | `Boolean` | `false` | - |
 | loading | Whether to show loading icon | `Boolean` | `false` | - |
-| disabled | Disable switch | `Boolean` | `false` | - |
+| disabled | Whether to disable switch | `Boolean` | `false` | - |
+| size | Size of switch | `String` | `30px` | - |
 
 ### Event
 

docs/markdown/zh-CN/switch.md

@@ -36,7 +36,7 @@ export default {
 
 #### 高级用法
 ```html
-<van-switch :value="checked" @input="onInput" />
+<van-switch :value="checked" size="36px" @input="onInput" />
 ```
 
 ```js
@@ -68,6 +68,7 @@ export default {
 | v-model | 开关选中状态 | `Boolean` | `false` | - |
 | loading | 是否为加载状态 | `Boolean` | `false` | - |
 | disabled | 是否为禁用状态 | `Boolean` | `false` | - |
+| size | 开关尺寸 | `String` | `30px` | - |
 
 ### Event
 

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
-    <div class="van-switch__node van-hairline-surround">
+    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;
+  height: 1em;
-  width: 53px;
+  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;
+    left: 0;
-    transition: transform .3s;
+    z-index: 1;
-
+    width: 1em;
-    &::after {
+    height: 1em;
-      border-color: rgba(0, 0, 0, .1);
+    transition: .3s;
-      border-radius: 27px;
+    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%;
+    top: 25%;
-    left: 50%;
+    left: 25%;
-    width: 16px;
+    width: 50%;
-    height: 16px;
+    height: 50%;
-    transform: translate3d(-50%, -50%, 0);
   }
 
   &--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;
   }

test/specs/switch-cell.spec.js

@@ -15,7 +15,7 @@ describe('SwitchCell', () => {
 
     DOMChecker(wrapper, {
       count: {
-        '.van-switch--off': 1,
+        '.van-switch--on': 0,
         '.van-switch--disabled': 0
       }
     });
@@ -34,7 +34,7 @@ describe('SwitchCell', () => {
         '.van-cell__text': '测试标题'
       },
       count: {
-        '.van-switch--off': 1,
+        '.van-switch--on': 0,
         '.van-switch--disabled': 0
       }
     });
@@ -66,7 +66,7 @@ describe('SwitchCell', () => {
 
     DOMChecker(wrapper, {
       count: {
-        '.van-switch--off': 1,
+        '.van-switch--on': 0,
         '.van-switch--disabled': 1
       }
     });

test/specs/switch.spec.js

@@ -20,17 +20,6 @@ describe('Switch', () => {
     expect(wrapper.hasClass('van-switch--on')).to.be.true;
   });
 
-  it('create off switch', () => {
-    wrapper = mount(Switch, {
-      propsData: {
-        value: false
-      }
-    });
-
-    expect(wrapper.hasClass('van-switch')).to.be.true;
-    expect(wrapper.hasClass('van-switch--off')).to.be.true;
-  });
-
   it('create loading switch', () => {
     wrapper = mount(Switch, {
       propsData: {
@@ -75,9 +64,9 @@ describe('Switch', () => {
       }
     });
 
-    expect(wrapper.hasClass('van-switch--off')).to.be.true;
+    expect(wrapper.hasClass('van-switch--on')).to.be.false;
     wrapper.trigger('click');
-    expect(wrapper.hasClass('van-switch--off')).to.be.true;
+    expect(wrapper.hasClass('van-switch--on')).to.be.false;
   });
 
   it('click should toggle the switch', () => {
@@ -91,7 +80,7 @@ describe('Switch', () => {
       wrapper.vm.value = val;
     });
 
-    expect(wrapper.hasClass('van-switch--off')).to.be.true;
+    expect(wrapper.hasClass('van-switch--on')).to.be.false;
     wrapper.trigger('click');
     expect(wrapper.hasClass('van-switch--on')).to.be.true;
   });