diff --git a/src/checkbox/index.js b/src/checkbox/index.js index fca7428d1..e54c2eacc 100644 --- a/src/checkbox/index.js +++ b/src/checkbox/index.js @@ -45,18 +45,6 @@ export default createComponent({ }); }, - onClickIcon() { - if (!this.isDisabled) { - this.toggle(); - } - }, - - onClickLabel() { - if (!this.isDisabled && !this.labelDisabled) { - this.toggle(); - } - }, - setParentValue(val) { const { parent } = this; const value = parent.value.slice(); diff --git a/src/mixins/checkbox.js b/src/mixins/checkbox.js index 068c15d23..00d27c9be 100644 --- a/src/mixins/checkbox.js +++ b/src/mixins/checkbox.js @@ -46,6 +46,20 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({ } }, + methods: { + onClick(event) { + const { label } = this.$refs; + const { target } = event; + const labelClicked = label && (label === target || label.contains(target)); + + if (!this.disabled && !(labelClicked && this.labelDisabled)) { + this.toggle(); + } + + this.$emit('click', event); + } + }, + render() { const { slots, checked } = this; @@ -55,8 +69,8 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({ const Label = slots() && ( {slots()} @@ -66,7 +80,6 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
{CheckIcon}
@@ -84,9 +97,7 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({ class={bem()} tabindex={this.tabindex} aria-checked={String(this.checked)} - onClick={event => { - this.$emit('click', event); - }} + onClick={this.onClick} > {Children} diff --git a/src/radio/index.js b/src/radio/index.js index 3f4427511..d72affa7d 100644 --- a/src/radio/index.js +++ b/src/radio/index.js @@ -27,16 +27,8 @@ export default createComponent({ }, methods: { - onClickIcon() { - if (!this.isDisabled) { - this.currentValue = this.name; - } - }, - - onClickLabel() { - if (!this.isDisabled && !this.labelDisabled) { - this.currentValue = this.name; - } + toggle() { + this.currentValue = this.name; } } });