[improvement] Switch: add active-color prop (#845)

example/pages/switch/index.js

@@ -1,4 +1,5 @@
 import Page from '../../common/page';
+import Dialog from '../../dist/dialog/dialog';
 
 Page({
   data: {
@@ -11,14 +12,11 @@ Page({
   },
 
   onChange2({ detail }) {
-    wx.showModal({
+    Dialog.confirm({
       title: '提示',
-      content: '是否切换开关？',
-      success: res => {
-        if (res.confirm) {
-          this.setData({ checked2: detail });
-        }
-      }
+      message: '是否切换开关？'
+    }).then((res) => {
+      this.setData({ checked2: detail });
     });
   }
 });

example/pages/switch/index.json

@@ -2,6 +2,7 @@
   "navigationBarTitleText": "Switch 开关",
   "usingComponents": {
     "demo-block": "../../components/demo-block/index",
-    "van-switch": "../../dist/switch/index"
+    "van-switch": "../../dist/switch/index",
+    "van-dialog": "../../dist/dialog/index"
   }
 }

example/pages/switch/index.wxml

@@ -25,6 +25,10 @@
   <van-switch
     checked="{{ checked2 }}"
     size="36px"
+    active-color="#4b0"
+    inactive-color="#f44"
     bind:change="onChange2"
   />
 </demo-block>
+
+<van-dialog id="van-dialog" />

packages/switch/README.md

@@ -1,6 +1,7 @@
 ## Switch 开关
 
 ### 使用指南
+
 在 index.json 中引入组件
 ```json
 "usingComponents": {
@@ -11,6 +12,7 @@
 ### 代码演示
 
 #### 基础用法
+
 ```html
 <van-switch checked="{{ checked }}" bind:change="onChange" />
 ```
@@ -29,20 +31,25 @@ Page({
 ```
 
 #### 禁用状态
+
 ```html
 <van-switch checked="{{ checked }}" disabled />
 ```
 
 #### 加载状态
+
 ```html
-<van-switch checked="{{ checked }}" loading  />
+<van-switch checked="{{ checked }}" loading />
 ```
 
 #### 高级用法
+
 ```html
 <van-switch
   size="36px"
   checked="{{ checked }}"
+  active-color="#4b0"
+  inactive-color="#f44"
   bind:change="onChange"
 />
 ```
@@ -76,6 +83,8 @@ Page({
 | loading | 是否为加载状态 | `Boolean` | `false` |
 | disabled | 是否为禁用状态 | `Boolean` | `false` |
 | size | 开关尺寸 | `String` | `30px` |
+| active-color | 打开时的背景色 | `String` | `#1989fa` |
+| inactive-color | 关闭时的背景色 | `String` | `#fff` |
 
 ### Event
 

packages/switch/index.less

@@ -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;
@@ -35,7 +36,7 @@
     background-color: @blue;
 
     .van-switch__node {
-      transform: translateX(.6em);
+      transform: translateX(.8em);
     }
   }
 

packages/switch/index.ts

@@ -9,6 +9,8 @@ VantComponent({
     checked: Boolean,
     loading: Boolean,
     disabled: Boolean,
+    activeColor: String,
+    inactiveColor: String,
     size: {
       type: String,
       value: '30px'
@@ -21,6 +23,20 @@ VantComponent({
     }
   },
 
+  computed: {
+    classes(): string {
+      return this.classNames('custom-class', 'van-switch', {
+        'van-switch--on': this.data.checked,
+        'van-switch--disabled': this.data.disabled
+      });
+    },
+
+    style() {
+      const backgroundColor = this.data.checked ? this.data.activeColor : this.data.inactiveColor;
+      return `font-size: ${this.data.size}; ${ backgroundColor ? `background-color: ${backgroundColor}` : '' }`
+    }
+  },
+
   created() {
     this.setData({ value: this.data.checked });
   },

packages/switch/index.wxml

@@ -1,6 +1,6 @@
 <view
-  class="van-switch custom-class {{ checked ? 'van-switch--on' : '' }} {{ disabled ? 'van-switch--disabled' : '' }}"
-  style="font-size: {{ size }};"
+  style="{{ style }}"
+  class="{{ classes }}"
   bind:tap="onClick"
 >
   <view class="van-switch__node node-class">