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

packages/checkbox/demo/index.vue

@@ -9,8 +9,14 @@
       <van-checkbox :value="true" disabled>{{ $t('checkbox') }}</van-checkbox>
     </demo-block>
 
+    <demo-block :title="$t('customColor')">
+      <van-checkbox v-model="checkbox2" checked-color="#4b0">
+        {{ $t('customColor') }}
+      </van-checkbox>
+    </demo-block>
+
     <demo-block :title="$t('customIcon')">
-      <van-checkbox v-model="checkbox2">
+      <van-checkbox v-model="checkbox3">
         {{ $t('customIcon') }}
         <img
           slot="icon"
@@ -68,13 +74,15 @@ export default {
     'zh-CN': {
       checkbox: '复选框',
       customIcon: '自定义图标',
-      title3: 'Checkbox 组',
+      customColor: '自定义颜色',
+      title3: '复选框组',
       title4: '设置最大可选数',
-      title5: '与 Cell 组件一起使用'
+      title5: '搭配单元格组件使用'
     },
     'en-US': {
       checkbox: 'Checkbox',
       customIcon: 'Custom Icon',
+      customColor: 'Custom Color',
       title3: 'Checkbox Group',
       title4: 'Maximum amount of checked options',
       title5: 'Inside a Cell'
@@ -85,6 +93,7 @@ export default {
     return {
       checkbox1: true,
       checkbox2: true,
+      checkbox3: true,
       list: [
         'a',
         'b',

packages/checkbox/en-US.md

@@ -31,7 +31,14 @@ export default {
 <van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
 ```
 
+#### Custom Color
+
+```html
+<van-checkbox v-model="checked" checked-color="#4b0">Checkbox</van-checkbox>
+```
+
 #### Custom Icon
+
 Use icon slot to custom icon
 
 ```html
@@ -58,6 +65,7 @@ export default {
 ```
 
 #### Checkbox Group
+
 When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
 
 ```html
@@ -131,11 +139,12 @@ export default {
 | Attribute | Description | Type | Default |
 |------|------|------|------|
 | name | Checkbox name | `any` | - |
+| shape | Can be set to `round` `square` | `String` | `round` |
 | v-model | Check status | `Boolean` | `false` |
 | disabled | Diable checkbox | `Boolean` | `false` |
 | label-disabled | Whether to disable label click | `Boolean` | `false` |
 | label-position | Can be set to `left` | `String` | `right` |
-| shape | Can be set to `round` `square` | `String` | `round` |
+| checked-color | Checked color | `String` | `#1989fa` | - |
 
 ### CheckboxGroup API
 

packages/checkbox/index.vue

@@ -2,7 +2,7 @@
   <div :class="b()">
     <div :class="[b('icon', [shape, { disabled: isDisabled, checked }])]" @click="toggle">
       <slot name="icon" :checked="checked">
-        <icon name="success" />
+        <icon name="success" :style="iconStyle" />
       </slot>
     </div>
     <span v-if="$slots.default" :class="b('label', labelPosition)" @click="toggle('label')">
@@ -24,6 +24,7 @@ export default create({
     name: null,
     value: null,
     disabled: Boolean,
+    checkedColor: String,
     labelPosition: String,
     labelDisabled: {
       type: Boolean,
@@ -44,26 +45,8 @@ export default create({
       },
 
       set(val) {
-        const { parent } = this;
+        if (this.parent) {
-        if (parent) {
+          this.setParentValue(val);
-          const parentValue = this.parent.value.slice();
-          if (val) {
-            if (parent.max && parentValue.length >= parent.max) {
-              return;
-            }
-            /* istanbul ignore else */
-            if (parentValue.indexOf(this.name) === -1) {
-              parentValue.push(this.name);
-              parent.$emit('input', parentValue);
-            }
-          } else {
-            const index = parentValue.indexOf(this.name);
-            /* istanbul ignore else */
-            if (index !== -1) {
-              parentValue.splice(index, 1);
-              parent.$emit('input', parentValue);
-            }
-          }
         } else {
           this.$emit('input', val);
         }
@@ -72,6 +55,16 @@ export default create({
 
     isDisabled() {
       return (this.parent && this.parent.disabled) || this.disabled;
+    },
+
+    iconStyle() {
+      const { checkedColor } = this;
+      if (checkedColor && this.checked && !this.isDisabled) {
+        return {
+          borderColor: checkedColor,
+          backgroundColor: checkedColor
+        };
+      }
     }
   },
 
@@ -90,6 +83,31 @@ export default create({
       if (!this.isDisabled && !(target === 'label' && this.labelDisabled)) {
         this.checked = !this.checked;
       }
+    },
+
+    setParentValue(val) {
+      const { parent } = this;
+      const value = parent.value.slice();
+
+      if (val) {
+        if (parent.max && value.length >= parent.max) {
+          return;
+        }
+
+        /* istanbul ignore else */
+        if (value.indexOf(this.name) === -1) {
+          value.push(this.name);
+          parent.$emit('input', value);
+        }
+      } else {
+        const index = value.indexOf(this.name);
+
+        /* istanbul ignore else */
+        if (index !== -1) {
+          value.splice(index, 1);
+          parent.$emit('input', value);
+        }
+      }
     }
   }
 });

packages/checkbox/test/__snapshots__/demo.spec.js.snap

@@ -24,6 +24,16 @@ exports[`renders demo correctly 1`] = `
         </i>
       </div> <span class="van-checkbox__label">复选框</span></div>
   </div>
+  <div>
+    <div class="van-checkbox">
+      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
+        <i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;border-color:#4b0;background-color:#4b0;">
+          <!---->
+        </i>
+      </div> <span class="van-checkbox__label">
+      自定义颜色
+    </span></div>
+  </div>
   <div>
     <div class="van-checkbox">
       <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">

packages/checkbox/zh-CN.md

@@ -32,7 +32,14 @@ export default {
 <van-checkbox v-model="checked" disabled>复选框</van-checkbox>
 ```
 
+#### 自定义颜色
+
+```html
+<van-checkbox v-model="checked" checked-color="#4b0">复选框</van-checkbox>
+```
+
 #### 自定义图标
+
 通过 icon 插槽自定义图标，可以通过 `slot-scope` 判断是否为选中状态
 
 ```html
@@ -58,9 +65,9 @@ export default {
 }
 ```
 
-#### Checkbox 组
+#### 复选框组
 
-需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
+与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
 
 ```html
 <van-checkbox-group v-model="result">
@@ -99,7 +106,7 @@ export default {
 </van-checkbox-group>
 ```
 
-#### 与 Cell 组件一起使用
+#### 搭配单元格组件使用
 
 此时你需要再引入`Cell`和`CellGroup`组件，并通过 checkbox 的 toggle 方法手动触发切换
 
@@ -139,6 +146,7 @@ export default {
 | disabled | 是否禁用单选框 | `Boolean` | `false` | - |
 | label-disabled | 是否禁用单选框文本点击 | `Boolean` | `false` | - |
 | label-position | 文本位置，可选值为 `left` | `String` | `right` | 1.1.11 |
+| checked-color | 选中状态颜色 | `String` | `#1989fa` | 1.4.3 |
 
 ### CheckboxGroup API