From 574a325c4580160cd2688aa57bbee5b65e7d1b0d Mon Sep 17 00:00:00 2001
From: "mo.duan" <mo.duan@tendcloud.com>
Date: Fri, 6 Sep 2019 15:11:47 +0800
Subject: [PATCH] Switch add new prop: true-color & false-color

Switch add new prop: true-color & false-color
---
 examples/routers/switch.vue      |  4 +++-
 src/components/switch/switch.vue | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/examples/routers/switch.vue b/examples/routers/switch.vue
index 2c004ff6..8bc5f268 100644
--- a/examples/routers/switch.vue
+++ b/examples/routers/switch.vue
@@ -32,6 +32,7 @@
         <br><br>
         <i-switch :disabled="disabled"></i-switch>
         <Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button>
+        <i-switch v-model="switch1" true-color="#13ce66" false-color="#ff4949" />
     </div>
 </template>
 <script>
@@ -40,7 +41,8 @@
             return {
                 m1: true,
                 disabled: true,
-                loading: false
+                loading: false,
+                switch1 : true
             }
         },
         methods: {
diff --git a/src/components/switch/switch.vue b/src/components/switch/switch.vue
index 9eb4c2a1..4ae936e0 100644
--- a/src/components/switch/switch.vue
+++ b/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,17 @@
                     }
                 ];
             },
+            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`;
             }