From 485db11ee255437615af71548d8f1682bd296336 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Thu, 5 Sep 2019 14:13:31 +0800
Subject: [PATCH] Switch add new prop: true-color & false-color

---
 examples/routers/switch.vue      |  5 ++++-
 src/components/switch/switch.vue | 20 ++++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/examples/routers/switch.vue b/examples/routers/switch.vue
index 2c004ff6..a37ef116 100644
--- a/examples/routers/switch.vue
+++ b/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: {
diff --git a/src/components/switch/switch.vue b/src/components/switch/switch.vue
index 9eb4c2a1..7ceca8f7 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,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`;
             }