From 42f985cd7b44eabeadaaefe27f2b3c4e1ad9e3e1 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Thu, 1 Nov 2018 19:56:09 +0800
Subject: [PATCH] [improvement] Switch: add active-color prop (#2013)

---
 .../address-edit/test/__snapshots__/demo.spec.js.snap  |  2 +-
 .../address-edit/test/__snapshots__/index.spec.js.snap |  2 +-
 .../switch-cell/test/__snapshots__/demo.spec.js.snap   |  6 +++---
 packages/switch/demo/index.vue                         |  8 +++++++-
 packages/switch/en-US.md                               | 10 +++++++++-
 packages/switch/index.vue                              |  5 ++++-
 packages/switch/test/__snapshots__/demo.spec.js.snap   |  8 ++++----
 packages/switch/zh-CN.md                               | 10 +++++++++-
 packages/vant-css/src/switch.css                       |  9 +++++----
 9 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/packages/address-edit/test/__snapshots__/demo.spec.js.snap b/packages/address-edit/test/__snapshots__/demo.spec.js.snap
index 61cc2f7e0..ee5f0f5ce 100644
--- a/packages/address-edit/test/__snapshots__/demo.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/demo.spec.js.snap
@@ -97,7 +97,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
         <div class="van-cell__value">
-          <div title="设为默认收货地址" class="van-switch" style="font-size:26px;">
+          <div title="设为默认收货地址" class="van-switch" style="font-size:26px;background-color:undefined;">
             <div class="van-switch__node">
               <!---->
             </div>
diff --git a/packages/address-edit/test/__snapshots__/index.spec.js.snap b/packages/address-edit/test/__snapshots__/index.spec.js.snap
index 239de8ae8..eacaf69da 100644
--- a/packages/address-edit/test/__snapshots__/index.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/index.spec.js.snap
@@ -203,7 +203,7 @@ exports[`create a AddressEdit with props 1`] = `
       <!---->
     </div>
     <div class="van-cell__value">
-      <div title="设为默认收货地址" class="van-switch van-switch--on" style="font-size:26px;">
+      <div title="设为默认收货地址" class="van-switch van-switch--on" style="font-size:26px;background-color:undefined;">
         <div class="van-switch__node">
           <!---->
         </div>
diff --git a/packages/switch-cell/test/__snapshots__/demo.spec.js.snap b/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
index 6c003620b..c0c42dba4 100644
--- a/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
+++ b/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
@@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
         <div class="van-cell__value">
-          <div title="标题" class="van-switch van-switch--on" style="font-size:26px;">
+          <div title="标题" class="van-switch van-switch--on" style="font-size:26px;background-color:undefined;">
             <div class="van-switch__node">
               <!---->
             </div>
@@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
         <div class="van-cell__value">
-          <div title="标题" class="van-switch van-switch--on van-switch--disabled" style="font-size:26px;">
+          <div title="标题" class="van-switch van-switch--on van-switch--disabled" style="font-size:26px;background-color:undefined;">
             <div class="van-switch__node">
               <!---->
             </div>
@@ -46,7 +46,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
         <div class="van-cell__value">
-          <div title="标题" class="van-switch van-switch--on" style="font-size:26px;">
+          <div title="标题" class="van-switch van-switch--on" style="font-size:26px;background-color:undefined;">
             <div class="van-switch__node">
               <div class="van-loading van-loading--circular van-loading van-switch__loading" style="color:#c9c9c9;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
             </div>
diff --git a/packages/switch/demo/index.vue b/packages/switch/demo/index.vue
index f3ca7e351..5fcee272e 100644
--- a/packages/switch/demo/index.vue
+++ b/packages/switch/demo/index.vue
@@ -13,7 +13,13 @@
     </demo-block>
 
     <demo-block :title="$t('advancedUsage')">
-      <van-switch :value="checked2" size="36px" @input="onInput" />
+      <van-switch
+        :value="checked2"
+        size="36px"
+        active-color="#4b0"
+        inactive-color="#f44"
+        @input="onInput"
+      />
     </demo-block>
   </demo-section>
 </template>
diff --git a/packages/switch/en-US.md b/packages/switch/en-US.md
index f7c54e1da..07742bf9f 100644
--- a/packages/switch/en-US.md
+++ b/packages/switch/en-US.md
@@ -41,7 +41,13 @@ export default {
 #### Advanced usage
 
 ```html
-<van-switch :value="checked" size="36px" @input="onInput" />
+<van-switch
+  :value="checked"
+  size="36px"
+  active-color="#4b0"
+  inactive-color="#f44"
+  @input="onInput"
+/>
 ```
 
 ```js
@@ -73,6 +79,8 @@ export default {
 | loading | Whether to show loading icon | `Boolean` | `false` |
 | disabled | Whether to disable switch | `Boolean` | `false` |
 | size | Size of switch | `String` | `30px` |
+| active-color | Background color when active | `String` | `#1989fa` |
+| inactive-color | Background color when inactive | `String` | `#fff` |
 
 ### Event
 
diff --git a/packages/switch/index.vue b/packages/switch/index.vue
index 32e705a00..b79d9e780 100644
--- a/packages/switch/index.vue
+++ b/packages/switch/index.vue
@@ -23,6 +23,8 @@ export default create({
     value: Boolean,
     loading: Boolean,
     disabled: Boolean,
+    activeColor: String,
+    inactiveColor: String,
     size: {
       type: String,
       default: '30px'
@@ -32,7 +34,8 @@ export default create({
   computed: {
     style() {
       return {
-        fontSize: this.size
+        fontSize: this.size,
+        backgroundColor: this.value ? this.activeColor : this.inactiveColor
       };
     }
   },
diff --git a/packages/switch/test/__snapshots__/demo.spec.js.snap b/packages/switch/test/__snapshots__/demo.spec.js.snap
index 38c8843d8..44196c044 100644
--- a/packages/switch/test/__snapshots__/demo.spec.js.snap
+++ b/packages/switch/test/__snapshots__/demo.spec.js.snap
@@ -3,28 +3,28 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-switch van-switch--on" style="font-size:30px;">
+    <div class="van-switch van-switch--on" style="font-size:30px;background-color:undefined;">
       <div class="van-switch__node">
         <!---->
       </div>
     </div>
   </div>
   <div>
-    <div class="van-switch van-switch--on van-switch--disabled" style="font-size:30px;">
+    <div class="van-switch van-switch--on van-switch--disabled" style="font-size:30px;background-color:undefined;">
       <div class="van-switch__node">
         <!---->
       </div>
     </div>
   </div>
   <div>
-    <div class="van-switch van-switch--on" style="font-size:30px;">
+    <div class="van-switch van-switch--on" style="font-size:30px;background-color:undefined;">
       <div class="van-switch__node">
         <div class="van-loading van-loading--circular van-loading van-switch__loading" style="color:#c9c9c9;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
       </div>
     </div>
   </div>
   <div>
-    <div class="van-switch van-switch--on" style="font-size:36px;">
+    <div class="van-switch van-switch--on" style="font-size:36px;background-color:#4b0;">
       <div class="van-switch__node">
         <!---->
       </div>
diff --git a/packages/switch/zh-CN.md b/packages/switch/zh-CN.md
index f0e272f36..2d4e13283 100644
--- a/packages/switch/zh-CN.md
+++ b/packages/switch/zh-CN.md
@@ -36,7 +36,13 @@ export default {
 
 #### 高级用法
 ```html
-<van-switch :value="checked" size="36px" @input="onInput" />
+<van-switch
+  :value="checked"
+  size="36px"
+  active-color="#4b0"
+  inactive-color="#f44"
+  @input="onInput"
+/>
 ```
 
 ```js
@@ -69,6 +75,8 @@ export default {
 | loading | 是否为加载状态 | `Boolean` | `false` | - |
 | disabled | 是否为禁用状态 | `Boolean` | `false` | - |
 | size | 开关尺寸 | `String` | `30px` | 1.0.0 |
+| active-color | 打开时的背景色 | `String` | `#1989fa` | 1.3.11 |
+| inactive-color | 关闭时的背景色 | `String` | `#fff` | 1.3.11 |
 
 ### Event
 
diff --git a/packages/vant-css/src/switch.css b/packages/vant-css/src/switch.css
index 5afdf960f..0a1985896 100644
--- a/packages/vant-css/src/switch.css
+++ b/packages/vant-css/src/switch.css
@@ -2,13 +2,14 @@
 
 .van-switch {
   height: 1em;
-  width: 1.6em;
+  width: 1.8em;
   display: inline-block;
   position: relative;
-  background: $white;
+  border-radius: 1em;
   box-sizing: content-box;
   border: 1px solid rgba(0, 0, 0, .1);
-  border-radius: 1em;
+  background-color: $white;
+  transition: background-color .3s;
 
   &__node {
     top: 0;
@@ -34,7 +35,7 @@
     background-color: $blue;
 
     .van-switch__node {
-      transform: translateX(.6em);
+      transform: translateX(.8em);
     }
   }