[new feature] Switch: add active-value & inactive-value prop (#1297)

packages/switch/README.md

@@ -98,6 +98,8 @@ Page({
 | size | 开关尺寸 | `String` | `30px` |
 | active-color | 打开时的背景色 | `String` | `#1989fa` |
 | inactive-color | 关闭时的背景色 | `String` | `#fff` |
+| active-value | 打开时的值 | `any` | `true` |
+| inactive-value | 关闭时的值 | `any` | `false` |
 
 ### Event
 

packages/switch/index.ts

@@ -6,7 +6,7 @@ VantComponent({
   classes: ['node-class'],
 
   props: {
-    checked: Boolean,
+    checked: null,
     loading: Boolean,
     disabled: Boolean,
     activeColor: String,
@@ -14,6 +14,14 @@ VantComponent({
     size: {
       type: String,
       value: '30px'
+    },
+    activeValue: {
+      type: null,
+      value: true
+    },
+    inactiveValue: {
+      type: null,
+      value: false
     }
   },
 
@@ -29,10 +37,12 @@ VantComponent({
 
   methods: {
     onClick() {
+      const { activeValue, inactiveValue } = this.data;
       if (!this.data.disabled && !this.data.loading) {
-        const checked = !this.data.checked;
+        const checked = this.data.checked === activeValue;
-        this.$emit('input', checked);
+        const value = checked ? inactiveValue : activeValue;
-        this.$emit('change', checked);
+        this.$emit('input', value);
+        this.$emit('change', value);
       }
     }
   }

packages/switch/index.wxml

@@ -1,7 +1,7 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
 <view
-  class="custom-class {{ utils.bem('switch', { on: checked, disabled }) }}"
+  class="custom-class {{ utils.bem('switch', { on: value === activeValue, disabled }) }}"
   style="font-size: {{ size }}; {{ (checked ? activeColor : inactiveColor) ? 'background-color: ' + (checked ? activeColor : inactiveColor ) : '' }}"
   bind:tap="onClick"
 >