From 3d10d42fccadd1b9df46860d758a91f7825073e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Sat, 11 Jan 2020 08:54:07 +0800
Subject: [PATCH] fix(Checkbox): only the icon is clickable when label-disabled

---
 src/checkbox/README.md                        |  2 +-
 src/checkbox/README.zh-CN.md                  |  4 +-
 src/checkbox/demo/index.vue                   |  2 +-
 .../test/__snapshots__/demo.spec.js.snap      |  8 +-
 .../test/__snapshots__/index.spec.js.snap     |  2 +-
 src/mixins/checkbox.js                        | 82 +++++++++++--------
 src/radio/README.md                           |  4 +-
 src/radio/README.zh-CN.md                     |  6 +-
 src/radio/demo/index.vue                      |  8 +-
 .../test/__snapshots__/demo.spec.js.snap      | 20 +++--
 10 files changed, 82 insertions(+), 56 deletions(-)

diff --git a/src/checkbox/README.md b/src/checkbox/README.md
index ac496c3b5..c7137bfd7 100644
--- a/src/checkbox/README.md
+++ b/src/checkbox/README.md
@@ -54,7 +54,7 @@ export default {
 ### Custom Icon Size
 
 ```html
-<van-checkbox v-model="checked" icon-size="25px">Checkbox</van-checkbox>
+<van-checkbox v-model="checked" icon-size="24px">Checkbox</van-checkbox>
 ```
 
 ### Custom Icon
diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md
index 92c82da85..9a6940911 100644
--- a/src/checkbox/README.zh-CN.md
+++ b/src/checkbox/README.zh-CN.md
@@ -39,7 +39,7 @@ export default {
 
 ### 禁用文本点击
 
-通过设置`label-disabled`属性可以禁用复选框文本点击
+设置`label-disabled`属性后，点击复选框图标以外的内容不会触发切换
 
 ```html
 <van-checkbox v-model="checked" icon-disabled>复选框</van-checkbox>
@@ -66,7 +66,7 @@ export default {
 通过`icon-size`属性可以自定义图标的大小
 
 ```html
-<van-checkbox v-model="checked" icon-size="25px">复选框</van-checkbox>
+<van-checkbox v-model="checked" icon-size="24px">复选框</van-checkbox>
 ```
 
 ### 自定义图标
diff --git a/src/checkbox/demo/index.vue b/src/checkbox/demo/index.vue
index 706fba173..4d9c2f712 100644
--- a/src/checkbox/demo/index.vue
+++ b/src/checkbox/demo/index.vue
@@ -32,7 +32,7 @@
     </demo-block>
 
     <demo-block :title="$t('customIconSize')">
-      <van-checkbox v-model="checboxIcon" icon-size="25px">
+      <van-checkbox v-model="checboxIcon" icon-size="24px">
         {{ $t('customIconSize') }}
       </van-checkbox>
     </demo-block>
diff --git a/src/checkbox/test/__snapshots__/demo.spec.js.snap b/src/checkbox/test/__snapshots__/demo.spec.js.snap
index 7cdf71224..fb691cadd 100644
--- a/src/checkbox/test/__snapshots__/demo.spec.js.snap
+++ b/src/checkbox/test/__snapshots__/demo.spec.js.snap
@@ -9,13 +9,13 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div role="checkbox" tabindex="-1" aria-checked="false" class="van-checkbox">
+    <div role="checkbox" tabindex="-1" aria-checked="false" class="van-checkbox van-checkbox--disabled">
       <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled"><i class="van-icon van-icon-success">
           <!----></i></div><span class="van-checkbox__label van-checkbox__label--disabled">
       复选框
     </span>
     </div>
-    <div role="checkbox" tabindex="-1" aria-checked="true" class="van-checkbox">
+    <div role="checkbox" tabindex="-1" aria-checked="true" class="van-checkbox van-checkbox--disabled">
       <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked"><i class="van-icon van-icon-success">
           <!----></i></div><span class="van-checkbox__label van-checkbox__label--disabled">
       复选框
@@ -23,7 +23,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
+    <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-checkbox--label-disabled">
       <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
           <!----></i></div><span class="van-checkbox__label">
       复选框
@@ -48,7 +48,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
-      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked" style="font-size: 25px;"><i class="van-icon van-icon-success">
+      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked" style="font-size: 24px;"><i class="van-icon van-icon-success">
           <!----></i></div><span class="van-checkbox__label">
       自定义大小
     </span>
diff --git a/src/checkbox/test/__snapshots__/index.spec.js.snap b/src/checkbox/test/__snapshots__/index.spec.js.snap
index 311746d8d..54400fded 100644
--- a/src/checkbox/test/__snapshots__/index.spec.js.snap
+++ b/src/checkbox/test/__snapshots__/index.spec.js.snap
@@ -27,7 +27,7 @@ exports[`icon-size prop 1`] = `
 `;
 
 exports[`label disabled 1`] = `
-<div role="checkbox" tabindex="0" aria-checked="undefined" class="van-checkbox">
+<div role="checkbox" tabindex="0" aria-checked="undefined" class="van-checkbox van-checkbox--label-disabled">
   <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
       <!----></i></div><span class="van-checkbox__label">Label</span>
 </div>
diff --git a/src/mixins/checkbox.js b/src/mixins/checkbox.js
index 99ca478bb..b2e506c06 100644
--- a/src/mixins/checkbox.js
+++ b/src/mixins/checkbox.js
@@ -36,7 +36,9 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
     },
 
     iconStyle() {
-      const checkedColor = this.checkedColor || (this.parent && this.parent.checkedColor);
+      const checkedColor =
+        this.checkedColor || (this.parent && this.parent.checkedColor);
+
       if (checkedColor && this.checked && !this.isDisabled) {
         return {
           borderColor: checkedColor,
@@ -56,55 +58,71 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
 
   methods: {
     onClick(event) {
-      const { label } = this.$refs;
       const { target } = event;
-      const labelClicked = label && (label === target || label.contains(target));
+      const { icon } = this.$refs;
+      const iconClicked = icon === target || icon.contains(target);
 
-      if (!this.isDisabled && !(labelClicked && this.labelDisabled)) {
+      if (!this.isDisabled && (iconClicked || !this.labelDisabled)) {
         this.toggle();
       }
 
       this.$emit('click', event);
+    },
+
+    genIcon() {
+      const { checked } = this;
+      const iconSize = this.iconSize || (this.parent && this.parent.iconSize);
+
+      return (
+        <div
+          ref="icon"
+          class={bem('icon', [
+            this.shape,
+            { disabled: this.isDisabled, checked }
+          ])}
+          style={{ fontSize: addUnit(iconSize) }}
+        >
+          {this.slots('icon', { checked }) || (
+            <Icon name="success" style={this.iconStyle} />
+          )}
+        </div>
+      );
+    },
+
+    genLabel() {
+      const slot = this.slots();
+
+      if (slot) {
+        return (
+          <span
+            class={bem('label', [
+              this.labelPosition,
+              { disabled: this.isDisabled }
+            ])}
+          >
+            {slot}
+          </span>
+        );
+      }
     }
   },
 
   render() {
-    const { slots, checked } = this;
-
-    const CheckIcon = slots('icon', { checked }) || (
-      <Icon name="success" style={this.iconStyle} />
-    );
-
-    const Label = slots() && (
-      <span
-        ref="label"
-        class={bem('label', [this.labelPosition, { disabled: this.isDisabled }])}
-      >
-        {slots()}
-      </span>
-    );
-
-    const iconSize = this.iconSize || (this.parent && this.parent.iconSize);
-
-    const Children = [
-      <div
-        class={bem('icon', [this.shape, { disabled: this.isDisabled, checked }])}
-        style={{ fontSize: addUnit(iconSize) }}
-      >
-        {CheckIcon}
-      </div>
-    ];
+    const Children = [this.genIcon()];
 
     if (this.labelPosition === 'left') {
-      Children.unshift(Label);
+      Children.unshift(this.genLabel());
     } else {
-      Children.push(Label);
+      Children.push(this.genLabel());
     }
 
     return (
       <div
         role={role}
-        class={bem()}
+        class={bem({
+          disabled: this.isDisabled,
+          'label-disabled': this.labelDisabled
+        })}
         tabindex={this.tabindex}
         aria-checked={String(this.checked)}
         onClick={this.onClick}
diff --git a/src/radio/README.md b/src/radio/README.md
index 0b1651022..839d4759f 100644
--- a/src/radio/README.md
+++ b/src/radio/README.md
@@ -73,8 +73,8 @@ export default {
 
 ```html
 <van-radio-group v-model="radio">
-  <van-radio name="1">Radio 1</van-radio>
-  <van-radio name="2" icon-size="25px">Radio 2</van-radio>
+  <van-radio name="1" icon-size="24px">Radio 1</van-radio>
+  <van-radio name="2" icon-size="24px">Radio 2</van-radio>
 </van-radio-group>
 ```
 
diff --git a/src/radio/README.zh-CN.md b/src/radio/README.zh-CN.md
index 2a11d1c33..0eca5a5b0 100644
--- a/src/radio/README.zh-CN.md
+++ b/src/radio/README.zh-CN.md
@@ -46,7 +46,7 @@ export default {
 
 ### 禁用文本点击
 
-通过设置`label-disabled`属性可以禁用单选框文本点击
+设置`label-disabled`属性后，点击单选框图标以外的内容不会触发切换
 
 ```html
 <van-radio-group v-model="radio">
@@ -83,8 +83,8 @@ export default {
 
 ```html
 <van-radio-group v-model="radio">
-  <van-radio name="1">单选框 1</van-radio>
-  <van-radio name="2" icon-size="25px">单选框 2</van-radio>
+  <van-radio name="1" icon-size="24px">单选框 1</van-radio>
+  <van-radio name="2" icon-size="24px">单选框 2</van-radio>
 </van-radio-group>
 ```
 
diff --git a/src/radio/demo/index.vue b/src/radio/demo/index.vue
index ac93c6980..904c2c8f3 100644
--- a/src/radio/demo/index.vue
+++ b/src/radio/demo/index.vue
@@ -54,8 +54,12 @@
 
     <demo-block :title="$t('customIconSize')">
       <van-radio-group v-model="radioIconSize" class="demo-radio-group">
-        <van-radio name="1" checked-color="#07c160">{{ $t('radio') }} 1</van-radio>
-        <van-radio name="2" checked-color="#07c160" icon-size="25px">{{ $t('radio') }} 2</van-radio>
+        <van-radio name="1" checked-color="#07c160" icon-size="24px">
+          {{ $t('radio') }} 1
+        </van-radio>
+        <van-radio name="2" checked-color="#07c160" icon-size="24px">
+          {{ $t('radio') }} 2
+        </van-radio>
       </van-radio-group>
     </demo-block>
 
diff --git a/src/radio/test/__snapshots__/demo.spec.js.snap b/src/radio/test/__snapshots__/demo.spec.js.snap
index b6f61571b..24f54a888 100644
--- a/src/radio/test/__snapshots__/demo.spec.js.snap
+++ b/src/radio/test/__snapshots__/demo.spec.js.snap
@@ -16,11 +16,11 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div role="radiogroup" class="demo-radio-group van-radio-group">
-      <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
+      <div role="radio" tabindex="-1" aria-checked="false" class="van-radio van-radio--disabled">
         <div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled"><i class="van-icon van-icon-success">
             <!----></i></div><span class="van-radio__label van-radio__label--disabled">单选框 1</span>
       </div>
-      <div role="radio" tabindex="-1" aria-checked="true" class="van-radio">
+      <div role="radio" tabindex="-1" aria-checked="true" class="van-radio van-radio--disabled">
         <div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled van-radio__icon--checked"><i class="van-icon van-icon-success">
             <!----></i></div><span class="van-radio__label van-radio__label--disabled">单选框 2</span>
       </div>
@@ -28,11 +28,11 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div role="radiogroup" class="demo-radio-group van-radio-group">
-      <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
+      <div role="radio" tabindex="0" aria-checked="true" class="van-radio van-radio--label-disabled">
         <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
             <!----></i></div><span class="van-radio__label">单选框 1</span>
       </div>
-      <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
+      <div role="radio" tabindex="-1" aria-checked="false" class="van-radio van-radio--label-disabled">
         <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
             <!----></i></div><span class="van-radio__label">单选框 2</span>
       </div>
@@ -79,12 +79,16 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div role="radiogroup" class="demo-radio-group van-radio-group">
       <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
-        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
-            <!----></i></div><span class="van-radio__label">单选框 1</span>
+        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 24px;"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
+            <!----></i></div><span class="van-radio__label">
+        单选框 1
+      </span>
       </div>
       <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
-        <div class="van-radio__icon van-radio__icon--round" style="font-size: 25px;"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-radio__label">单选框 2</span>
+        <div class="van-radio__icon van-radio__icon--round" style="font-size: 24px;"><i class="van-icon van-icon-success">
+            <!----></i></div><span class="van-radio__label">
+        单选框 2
+      </span>
       </div>
     </div>
   </div>