From d46b6e4fdefc5723ba8a9b6501d74a6d0806896d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Wed, 8 May 2019 17:36:45 +0800
Subject: [PATCH] [new feature] Checkbox: add icon-size prop

---
 docs/markdown/v2-progress-tracking.md |  4 ++++
 packages/checkbox/en-US.md            |  1 +
 packages/checkbox/index.less          | 13 ++++++++-----
 packages/checkbox/zh-CN.md            |  1 +
 packages/mixins/checkbox.js           |  3 +++
 5 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md
index a6873f327..c5bd3f484 100644
--- a/docs/markdown/v2-progress-tracking.md
+++ b/docs/markdown/v2-progress-tracking.md
@@ -64,6 +64,10 @@
 
 - 新增`loading-type`属性
 
+### Checkbox
+
+- 新增`icon-size`属性
+
 ### Field
 
 - 新增`label-class`属性
diff --git a/packages/checkbox/en-US.md b/packages/checkbox/en-US.md
index f292a948b..0ebaf9e77 100644
--- a/packages/checkbox/en-US.md
+++ b/packages/checkbox/en-US.md
@@ -142,6 +142,7 @@ export default {
 | shape | Can be set to `square` | `String` | `round` |
 | v-model | Check status | `Boolean` | `false` |
 | disabled | Diable checkbox | `Boolean` | `false` |
+| icon-size | Icon size | `String | Number` | `20px` |
 | label-disabled | Whether to disable label click | `Boolean` | `false` |
 | label-position | Can be set to `left` | `String` | `right` |
 | checked-color | Checked color | `String` | `#1989fa` | - |
diff --git a/packages/checkbox/index.less b/packages/checkbox/index.less
index 7fed4858e..79d861516 100644
--- a/packages/checkbox/index.less
+++ b/packages/checkbox/index.less
@@ -8,19 +8,21 @@
   &__label {
     display: inline-block;
     vertical-align: middle;
-    line-height: @checkbox-size;
   }
 
   &__icon {
-    height: @checkbox-size;
+    height: 1em;
+    line-height: 1em;
+    font-size: @checkbox-size;
 
     .van-icon {
-      font-size: 14px;
+      display: block;
+      width: 1.25em;
+      height: 1.25em;
+      font-size: .8em;
       color: transparent;
       text-align: center;
       line-height: inherit;
-      width: @checkbox-size;
-      height: @checkbox-size;
       box-sizing: border-box;
       border: 1px solid @checkbox-border-color;
       transition: @checkbox-transition-duration;
@@ -56,6 +58,7 @@
 
   &__label {
     color: @checkbox-label-color;
+    line-height: @checkbox-size;
     margin-left: @checkbox-label-margin;
 
     &--left {
diff --git a/packages/checkbox/zh-CN.md b/packages/checkbox/zh-CN.md
index 43d0a3f0c..8ab8ec042 100644
--- a/packages/checkbox/zh-CN.md
+++ b/packages/checkbox/zh-CN.md
@@ -145,6 +145,7 @@ export default {
 | shape | 形状，可选值为 `square` | `String` | `round` | - |
 | v-model | 是否为选中状态 | `Boolean` | `false` | - |
 | disabled | 是否禁用复选框 | `Boolean` | `false` | - |
+| icon-size | 图标大小，默认单位为`px` | `String | Number` | `20px` | 2.0.0 |
 | label-disabled | 是否禁用复选框文本点击 | `Boolean` | `false` | - |
 | label-position | 文本位置，可选值为 `left` | `String` | `right` | 1.1.11 |
 | checked-color | 选中状态颜色 | `String` | `#1989fa` | 1.4.3 |
diff --git a/packages/mixins/checkbox.js b/packages/mixins/checkbox.js
index 38eb353fd..b243dab46 100644
--- a/packages/mixins/checkbox.js
+++ b/packages/mixins/checkbox.js
@@ -3,6 +3,7 @@
  */
 import Icon from '../icon';
 import { ChildrenMixin } from './relation';
+import { suffixPx } from '../utils';
 
 export const CheckboxMixin = (parent, bem) => ({
   mixins: [ChildrenMixin(parent)],
@@ -10,6 +11,7 @@ export const CheckboxMixin = (parent, bem) => ({
   props: {
     name: null,
     value: null,
+    iconSize: [String, Number],
     disabled: Boolean,
     checkedColor: String,
     labelPosition: String,
@@ -61,6 +63,7 @@ export const CheckboxMixin = (parent, bem) => ({
       >
         <div
           class={bem('icon', [this.shape, { disabled: this.isDisabled, checked }])}
+          style={{ fontSize: suffixPx(this.iconSize) }}
           onClick={this.onClickIcon}
         >
           {CheckIcon}