Switch add loading prop

examples/routers/switch.vue

@@ -1,15 +1,16 @@
 <template>
     <div>
-        <i-switch v-model="m1" true-value="yes" false-value="no">
+        <i-switch v-model="m1" :loading="loading">
             <span slot="open">开</span>
             <span slot="close">关</span>
         </i-switch>
         {{ m1 }}
-        <div @click="m1 = 'no'">toggle</div>
+        <div @click="m1 = !m1">toggle</div>
+        <div @click="loading = !loading">loading</div>
         <br><br>
-        <i-switch size="large"></i-switch>
+        <i-switch size="large" loading></i-switch>
         <i-switch></i-switch>
-        <i-switch size="small"></i-switch>
+        <i-switch size="small" v-model="m1" :loading="loading"></i-switch>
         <br><br>
         <i-switch>
             <span slot="open">开</span>
@@ -24,7 +25,7 @@
             <span slot="open">开启</span>
             <span slot="close">关闭</span>
         </i-switch>
-        <i-switch size="large">
+        <i-switch size="large" v-model="m1" :loading="loading">
             <span slot="open">ON</span>
             <span slot="close">OFF</span>
         </i-switch>
@@ -37,8 +38,9 @@
     export default {
         data () {
             return {
-                m1: 'yes',
+                m1: true,
-                disabled: true
+                disabled: true,
+                loading: false
             }
         },
         methods: {

src/components/switch/switch.vue

@@ -45,6 +45,10 @@
             },
             name: {
                 type: String
+            },
+            loading: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -59,7 +63,8 @@
                     {
                         [`${prefixCls}-checked`]: this.currentValue === this.trueValue,
                         [`${prefixCls}-disabled`]: this.disabled,
-                        [`${prefixCls}-${this.size}`]: !!this.size
+                        [`${prefixCls}-${this.size}`]: !!this.size,
+                        [`${prefixCls}-loading`]: this.loading,
                     }
                 ];
             },
@@ -70,7 +75,7 @@
         methods: {
             toggle (event) {
                 event.preventDefault();
-                if (this.disabled) {
+                if (this.disabled || this.loading) {
                     return false;
                 }
 

src/styles/components/switch.less

@@ -14,6 +14,10 @@
     user-select: none;
     transition: all @transition-time @ease-in-out;
 
+    &-loading{
+        opacity: .4;
+    }
+
     &-inner {
         color: #fff;
         font-size: @font-size-small;
@@ -44,6 +48,26 @@
         width: 26px;
     }
 
+    &:before{
+        content: '';
+        display: none;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        background-color: transparent;
+        position: absolute;
+        left: 3px;
+        top: 3px;
+        z-index: 1;
+        border: 1px solid @primary-color;
+        border-color: transparent transparent transparent @primary-color;
+        animation: switch-loading 1s linear;
+        animation-iteration-count: infinite;
+    }
+    &-loading:before{
+        display: block;
+    }
+
     &:focus {
         box-shadow: 0 0 0 2px fade(@primary-color, 20%);
         outline: 0;
@@ -64,11 +88,20 @@
         &:active:after {
             width: 14px;
         }
+        &:before{
+            width: 10px;
+            height: 10px;
+            left: 2px;
+            top: 2px;
+        }
     }
 
     &-small&-checked:after {
         left: 13px;
     }
+    &-small&-checked:before {
+        left: 14px;
+    }
 
     &-small:active&-checked:after {
         left: 11px;
@@ -88,6 +121,9 @@
     &-large&-checked:after {
         left: 35px;
     }
+    &-large&-checked:before {
+        left: 37px;
+    }
 
     &-large:active&-checked:after {
         left: 23px;
@@ -104,6 +140,9 @@
         &:after {
             left: 23px;
         }
+        &:before{
+            left: 25px;
+        }
 
         &:active:after {
             left: 15px;
@@ -124,4 +163,14 @@
             color: #ccc;
         }
     }
+    
 }
+
+@keyframes switch-loading {
+    0% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}