[improvement] Checkbox: add checked-color prop (#885)

example/pages/checkbox/index.js

@@ -4,6 +4,7 @@ Page({
   data: {
     checkbox1: true,
     checkbox2: true,
+    checkbox3: true,
     list: ['a', 'b', 'c'],
     result: ['a', 'b'],
     result2: [],

example/pages/checkbox/index.wxml

@@ -1,20 +1,57 @@
 <demo-block title="基本用法">
-  <van-checkbox value="{{ checkbox1 }}" data-key="checkbox1" bind:change="onChange" custom-class="demo-checkbox">复选框</van-checkbox>
+  <van-checkbox
-</demo-block>
+    value="{{ checkbox1 }}"
-
+    data-key="checkbox1"
-<demo-block title="禁用状态">
+    custom-class="demo-checkbox"
-  <van-checkbox value="{{ false }}" disabled custom-class="demo-checkbox">复选框</van-checkbox>
+    bind:change="onChange"
-  <van-checkbox value="{{ true }}" disabled custom-class="demo-checkbox">复选框</van-checkbox>
+  >
-</demo-block>
+    复选框
-
-<demo-block title="自定义图标">
-  <van-checkbox value="{{ checkbox2 }}" data-key="checkbox2" bind:change="onChange" use-icon-slot custom-class="demo-checkbox">
-    自定义图标
-    <image mode="widthFix" slot="icon" src="{{ checkbox2 ? icon.active : icon.normal }}" class="icon" />
   </van-checkbox>
 </demo-block>
 
-<demo-block title="Checkbox 组">
+<demo-block title="禁用状态">
+  <van-checkbox
+    disabled
+    value="{{ false }}"
+    custom-class="demo-checkbox"
+  >
+    复选框
+  </van-checkbox>
+  <van-checkbox
+    disabled
+    value="{{ true }}"
+    custom-class="demo-checkbox"
+  >
+    复选框
+  </van-checkbox>
+</demo-block>
+
+<demo-block title="自定义颜色">
+  <van-checkbox
+    value="{{ checkbox2 }}"
+    data-key="checkbox2"
+    checked-color="#4b0"
+    custom-class="demo-checkbox"
+    bind:change="onChange"
+  >
+    复选框
+  </van-checkbox>
+</demo-block>
+
+<demo-block title="自定义图标">
+  <van-checkbox
+    use-icon-slot
+    value="{{ checkbox3 }}"
+    data-key="checkbox3"
+    custom-class="demo-checkbox"
+    bind:change="onChange"
+  >
+    自定义图标
+    <image mode="widthFix" slot="icon" src="{{ checkbox3 ? icon.active : icon.normal }}" class="icon" />
+  </van-checkbox>
+</demo-block>
+
+<demo-block title="复选框组">
   <van-checkbox-group value="{{ result }}" data-key="result" bind:change="onChange">
     <van-checkbox
       wx:for="{{ list }}"
@@ -40,7 +77,7 @@
   </van-checkbox-group>
 </demo-block>
 
-<demo-block title="与 Cell 组件一起使用">
+<demo-block title="搭配单元格组件使用">
   <van-checkbox-group value="{{ result3 }}" data-key="result3" bind:change="onChange">
     <van-cell-group >
       <van-cell

packages/checkbox/README.md

@@ -12,6 +12,7 @@
 ### 代码演示
 
 #### 基础用法
+
 通过`value`绑定 checkbox 的勾选状态
 
 ```html
@@ -21,10 +22,29 @@
 #### 禁用状态
 
 ```html
-<van-checkbox value="{{ checked }}" bind:change="onChange" disabled>复选框</van-checkbox>
+<van-checkbox
+  disabled
+  value="{{ checked }}"
+  bind:change="onChange"
+>
+  复选框
+</van-checkbox>
+```
+
+#### 自定义颜色
+
+ ```html
+<van-checkbox
+  value="{{ checked }}"
+  checked-color="#4b0"
+  bind:change="onChange"
+>
+  复选框
+</van-checkbox>
 ```
 
 #### 自定义图标
+
 通过 icon 插槽自定义图标
 
 ```html
@@ -55,7 +75,7 @@ Page({
 });
 ```
 
-#### Checkbox 组
+#### 复选框组
 
 需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`value`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
 
@@ -100,7 +120,7 @@ Page({
 </van-checkbox-group>
 ```
 
-#### 与 Cell 组件一起使用
+#### 搭配单元格组件使用
 
 此时你需要再引入`Cell`和`CellGroup`组件，并通过 checkbox 的 toggle 方法手动触发切换
 
@@ -155,6 +175,7 @@ Page({
 | label-position | 文本位置，可选值为 `left` | `String` | `right` |
 | shape | 形状，可选值为 `round` `square` | `String` | `round` |
 | use-icon-slot | 是否使用 icon slot | `Boolean` | `false` |
+| checked-color | 选中状态颜色 | `String` | `#1989fa` |
 
 ### CheckboxGroup API
 

packages/checkbox/index.ts

@@ -13,22 +13,35 @@ VantComponent({
   props: {
     value: null,
     disabled: Boolean,
-    labelDisabled: Boolean,
+    useIconSlot: Boolean,
+    checkedColor: String,
     labelPosition: String,
+    labelDisabled: Boolean,
     shape: {
       type: String,
       value: 'round'
-    },
+    }
-    useIconSlot: Boolean
   },
 
   computed: {
     iconClass(): string {
       const { disabled, value, shape } = this.data;
-      return this.classNames('van-checkbox__icon', `van-checkbox__icon--${shape}`, {
+      return this.classNames(
+        'van-checkbox__icon',
+        `van-checkbox__icon--${shape}`,
+        {
           'van-checkbox__icon--disabled': disabled,
           'van-checkbox__icon--checked': value
-      });
+        }
+      );
+    },
+
+    iconStyle(): string {
+      const { value, disabled, checkedColor } = this.data;
+      if (checkedColor && value && !disabled) {
+        return `border-color: ${checkedColor}; background-color: ${checkedColor}`;
+      }
+      return '';
     }
   },
 
@@ -36,8 +49,29 @@ VantComponent({
     emitChange(value) {
       const parent = this.getRelationNodes('../checkbox-group/index')[0];
       if (parent) {
+        this.setParentValue(parent, value);
+      } else {
+        this.$emit('input', value);
+        this.$emit('change', value);
+      }
+    },
+
+    toggle() {
+      if (!this.data.disabled) {
+        this.emitChange(!this.data.value);
+      }
+    },
+
+    onClickLabel() {
+      if (!this.data.disabled && !this.data.labelDisabled) {
+        this.emitChange(!this.data.value);
+      }
+    },
+
+    setParentValue(parent, value) {
       const parentValue = parent.data.value.slice();
       const { name } = this.data;
+
       if (value) {
         if (parent.data.max && parentValue.length >= parent.data.max) {
           return;
@@ -57,22 +91,6 @@ VantComponent({
           parent.$emit('change', parentValue);
         }
       }
-      } else {
-        this.$emit('input', value);
-        this.$emit('change', value);
-      }
-    },
-
-    toggle() {
-      if (!this.data.disabled) {
-        this.emitChange(!this.data.value);
-      }
-    },
-
-    onClickLabel() {
-      if (!this.data.disabled && !this.data.labelDisabled) {
-        this.emitChange(!this.data.value);
-      }
     }
   }
 });

packages/checkbox/index.wxml

@@ -5,6 +5,7 @@
       wx:else
       name="success"
       class="{{ iconClass }}"
+      style="{{ iconStyle }}"
       custom-class="icon-class"
       custom-style="line-height: 20px;"
     />