Switch add large size and optimize style

Switch add large size and optimize style

src/components/switch/switch.vue

@@ -23,7 +23,7 @@
             },
             size: {
                 validator (value) {
-                    return oneOf(value, ['small']);
+                    return oneOf(value, ['large', 'small']);
                 }
             }
         },

src/styles/components/switch.less

@@ -2,10 +2,10 @@
 
 .@{switch-prefix-cls} {
     display: inline-block;
-    width: 44px;
+    width: 48px;
     height: 24px;
     line-height: 22px;
-    border-radius: 22px;
+    border-radius: 24px;
     vertical-align: middle;
     border: 1px solid #ccc;
     background-color: #ccc;
@@ -18,7 +18,7 @@
         color: #fff;
         font-size: 12px;
         position: absolute;
-        left: 24px;
+        left: 25px;
 
         i{
             width: 12px;
@@ -29,13 +29,13 @@
 
     &:after {
         content: '';
-        width: 22px;
+        width: 20px;
-        height: 22px;
+        height: 20px;
-        border-radius: 50%;
+        border-radius: 20px;
         background-color: #fff;
         position: absolute;
-        left: 0;
+        left: 1px;
-        top: 0;
+        top: 1px;
         cursor: pointer;
         .transition2(left @transition-time @ease-in-out, width @transition-time @ease-in-out);
     }
@@ -54,26 +54,45 @@
     }
 
     &-small {
-        height: 14px;
+        width: 24px;
-        line-height: 12px;
-        width: 28px;
-        &:after {
-            width: 12px;
         height: 12px;
+        line-height: 10px;
+        &:after {
+            width: 10px;
+            height: 10px;
             top: 0;
             left: 0;
         }
         &:active:after {
-            width: 16px;
+            width: 14px;
         }
     }
 
     &-small&-checked:after {
-        left: 14px;
+        left: 12px;
     }
 
     &-small:active&-checked:after {
-        left: 10px;
+        left: 8px;
+    }
+
+    &-large{
+        width: 60px;
+        &:active:after {
+            width: 26px;
+        }
+    }
+
+    &-large:active:after {
+        width: 32px;
+    }
+
+    &-large&-checked:after {
+        left: 37px;
+    }
+
+    &-large:active&-checked:after {
+        left: 25px;
     }
 
     &-checked {
@@ -81,15 +100,15 @@
         background-color: @primary-color;
 
         .@{switch-prefix-cls}-inner {
-            left: 6px;
+            left: 8px;
         }
 
         &:after {
-            left: 20px;
+            left: 25px;
         }
 
         &:active:after {
-            left: 16px;
+            left: 19px;
         }
     }
 

test/app.vue

@@ -35,6 +35,7 @@ li + li {
                 <li><a v-link="'/select'">Select</a></li>
                 <li><a v-link="'/slider'">Slider</a></li>
                 <li><a v-link="'/step'">Step</a></li>
+                <li><a v-link="'/switch'">Switch</a></li>
             </ul>
         </nav>
         <router-view></router-view>

test/main.js

@@ -65,6 +65,11 @@ router.map({
         component: function (resolve) {
             require(['./routers/step.vue'], resolve);
         }
+    },
+    '/switch': {
+        component: function (resolve) {
+            require(['./routers/switch.vue'], resolve);
+        }
     }
 });
 

test/routers/switch.vue

@@ -0,0 +1,34 @@
+<template>
+    <Switch @on-change="change"></Switch>
+    <Switch>
+        <span slot="open">开</span>
+        <span slot="close">关</span>
+    </Switch>
+    <Switch size="large">
+        <span slot="open">ON</span>
+        <span slot="close">OFF</span>
+    </Switch>
+    <Switch>
+        <Icon type="android-done" slot="open"></Icon>
+        <Icon type="android-close" slot="close"></Icon>
+    </Switch>
+    <Switch :disabled="disabled"></Switch>
+    <i-button type="primary" @click="disabled = !disabled">Toggle Disabled</i-button>
+    <Switch size="small"></Switch>
+</template>
+<script>
+    import { Switch, Message, iButton, Icon } from 'iview';
+    export default {
+        components: { Switch, Message, iButton, Icon },
+        data () {
+            return {
+                disabled: true
+            }
+        },
+        methods: {
+            change (status) {
+                Message.info('开关状态：' + status);
+            }
+        }
+    }
+</script>