+
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 (
+
+ {this.slots('icon', { checked }) || (
+
+ )}
+
+ );
+ },
+
+ genLabel() {
+ const slot = this.slots();
+
+ if (slot) {
+ return (
+
+ {slot}
+
+ );
+ }
}
},
render() {
- const { slots, checked } = this;
-
- const CheckIcon = slots('icon', { checked }) || (
-
- );
-
- const Label = slots() && (
-
- {slots()}
-
- );
-
- const iconSize = this.iconSize || (this.parent && this.parent.iconSize);
-
- const Children = [
-
- {CheckIcon}
-
- ];
+ const Children = [this.genIcon()];
if (this.labelPosition === 'left') {
- Children.unshift(Label);
+ Children.unshift(this.genLabel());
} else {
- Children.push(Label);
+ Children.push(this.genLabel());
}
return (
- Radio 1
- Radio 2
+ Radio 1
+ Radio 2
```
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
@@ -83,8 +83,8 @@ export default {
```html
- 单选框 1
- 单选框 2
+ 单选框 1
+ 单选框 2
```
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 @@
- {{ $t('radio') }} 1
- {{ $t('radio') }} 2
+
+ {{ $t('radio') }} 1
+
+
+ {{ $t('radio') }} 2
+
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`] = `
-
+
-
+
@@ -28,11 +28,11 @@ exports[`renders demo correctly 1`] = `
-
+
-
+
@@ -79,12 +79,16 @@ exports[`renders demo correctly 1`] = `