Switch add new prop: true-color & false-color

examples/routers/switch.vue

@@ -32,6 +32,8 @@
         <br><br>
         <i-switch :disabled="disabled"></i-switch>
         <Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button>
+        <Divider></Divider>
+        <i-switch v-model="switch1" true-color="#13ce66" false-color="#ff4949" />
     </div>
 </template>
 <script>
@@ -40,7 +42,8 @@
             return {
                 m1: true,
                 disabled: true,
-                loading: false
+                loading: false,
+                switch1: true
             }
         },
         methods: {

src/components/switch/switch.vue

@@ -2,6 +2,7 @@
     <span
         tabindex="0"
         :class="wrapClasses"
+        :style="wrapStyles"
         @click="toggle"
         @keydown.space="toggle"
     >
@@ -52,6 +53,12 @@
             loading: {
                 type: Boolean,
                 default: false
+            },
+            trueColor: {
+                type: String
+            },
+            falseColor: {
+                type: String
             }
         },
         data () {
@@ -71,6 +78,19 @@
                     }
                 ];
             },
+            wrapStyles () {
+                let style = {};
+
+                if (this.trueColor && this.currentValue === this.trueValue) {
+                    style['border-color'] = this.trueColor;
+                    style['background-color'] = this.trueColor;
+                } else if (this.falseColor && this.currentValue === this.falseValue) {
+                    style['border-color'] = this.falseColor;
+                    style['background-color'] = this.falseColor;
+                }
+
+                return style;
+            },
             innerClasses () {
                 return `${prefixCls}-inner`;
             }