blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-22 22:49:15 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] extract checkbox mixin (#2653)

Browse Source
This commit is contained in:
neverland 2019-01-31 10:05:00 +08:00 committed by GitHub
parent cb69bcbb99
commit f397f18a38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 105 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
packages/checkbox/index.js
View File

@ -1,24 +1,15 @@
import { use } from '../utils'; import { use } from '../utils';
import Icon from '../icon'; import CheckboxMixin from '../mixins/checkbox';
import findParent from '../mixins/find-parent';
const [sfc, bem] = use('checkbox'); const [sfc, bem] = use('checkbox');
export default sfc({ export default sfc({
mixins: [findParent], mixins: [
CheckboxMixin({
props: { bem,
name: null, parent: 'van-checkbox-group'
value: null, })
disabled: Boolean, ],
checkedColor: String,
labelPosition: String,
labelDisabled: Boolean,
shape: {
type: String,
default: 'round'
}
},
computed: { computed: {
checked: { checked: {
@ -33,20 +24,6 @@ export default sfc({
this.$emit('input', val); this.$emit('input', val);
} }
} }
},
isDisabled() {
return (this.parent && this.parent.disabled) || this.disabled;
},
iconStyle() {
const { checkedColor } = this;
if (checkedColor && this.checked && !this.isDisabled) {
return {
borderColor: checkedColor,
backgroundColor: checkedColor
};
}
} }
}, },
@ -56,14 +33,20 @@ export default sfc({
} }
}, },
created() {
this.findParent('van-checkbox-group');
},
methods: { methods: {
toggle(target) { toggle() {
if (!this.isDisabled && !(target === 'label' && this.labelDisabled)) { this.checked = !this.checked;
this.checked = !this.checked; },
onClickIcon() {
if (!this.isDisabled) {
this.toggle();
}
},
onClickLabel() {
if (!this.isDisabled && !this.labelDisabled) {
this.toggle();
} }
}, },
@ -91,36 +74,5 @@ export default sfc({
} }
} }
} }
},
render(h) {
const CheckIcon = this.$scopedSlots.icon ? (
this.$scopedSlots.icon({ checked: this.checked })
) : (
<Icon name="success" style={this.iconStyle} />
);
const Label = this.$slots.default && (
<span
class={bem('label', [this.labelPosition, { disabled: this.isDisabled }])}
onClick={() => {
this.toggle('label');
}}
>
{this.$slots.default}
</span>
);
return (
<div class={bem()}>
<div
class={bem('icon', [this.shape, { disabled: this.isDisabled, checked: this.checked }])}
onClick={this.toggle}
>
{CheckIcon}
</div>
{Label}
</div>
);
} }
}); });

76
packages/mixins/checkbox.js Normal file
View File

@ -0,0 +1,76 @@
/**
* Common part of Checkbox & Radio
*/
import Icon from '../icon';
import findParent from './find-parent';
export default ({ parent, bem }) => ({
mixins: [findParent],
props: {
name: null,
value: null,
disabled: Boolean,
checkedColor: String,
labelPosition: String,
labelDisabled: Boolean,
shape: {
type: String,
default: 'round'
}
},
created() {
this.findParent(parent);
},
computed: {
isDisabled() {
return (this.parent && this.parent.disabled) || this.disabled;
},
iconStyle() {
const { checkedColor } = this;
if (checkedColor && this.checked && !this.isDisabled) {
return {
borderColor: checkedColor,
backgroundColor: checkedColor
};
}
}
},
render(h) {
const CheckIcon = this.$scopedSlots.icon ? (
this.$scopedSlots.icon({ checked: this.checked })
) : (
<Icon name="success" style={this.iconStyle} />
);
const Label = this.$slots.default && (
<span
class={bem('label', [this.labelPosition, { disabled: this.isDisabled }])}
onClick={this.onClickLabel}
>
{this.$slots.default}
</span>
);
return (
<div
class={bem()}
onClick={() => {
this.$emit('click');
}}
>
<div
class={bem('icon', [this.shape, { disabled: this.isDisabled, checked: this.checked }])}
onClick={this.onClickIcon}
>
{CheckIcon}
</div>
{Label}
</div>
);
}
});

76
packages/radio/index.js
View File

@ -1,24 +1,15 @@
import { use } from '../utils'; import { use } from '../utils';
import Icon from '../icon'; import CheckboxMixin from '../mixins/checkbox';
import findParent from '../mixins/find-parent';
const [sfc, bem] = use('radio'); const [sfc, bem] = use('radio');
export default sfc({ export default sfc({
mixins: [findParent], mixins: [
CheckboxMixin({
props: { bem,
name: null, parent: 'van-radio-group'
value: null, })
disabled: Boolean, ],
checkedColor: String,
labelPosition: String,
labelDisabled: Boolean,
shape: {
type: String,
default: 'round'
}
},
computed: { computed: {
currentValue: { currentValue: {
@ -31,25 +22,11 @@ export default sfc({
} }
}, },
isDisabled() { checked() {
return this.parent ? this.parent.disabled || this.disabled : this.disabled; return this.currentValue === this.name;
},
iconStyle() {
const { checkedColor } = this;
if (checkedColor && this.currentValue === this.name && !this.isDisabled) {
return {
borderColor: checkedColor,
backgroundColor: checkedColor
};
}
} }
}, },
created() {
this.findParent('van-radio-group');
},
methods: { methods: {
onClickIcon() { onClickIcon() {
if (!this.isDisabled) { if (!this.isDisabled) {
@ -62,40 +39,5 @@ export default sfc({
this.currentValue = this.name; this.currentValue = this.name;
} }
} }
},
render(h) {
const checked = this.currentValue === this.name;
const CheckIcon = this.$scopedSlots.icon ? (
this.$scopedSlots.icon({ checked })
) : (
<Icon name="success" style={this.iconStyle} />
);
const Label = this.$slots.default && (
<span
class={bem('label', [this.labelPosition, { disabled: this.isDisabled }])}
onClick={this.onClickLabel}
>
{this.$slots.default}
</span>
);
return (
<div
class={bem()}
onClick={() => {
this.$emit('click');
}}
>
<div
class={bem('icon', [this.shape, { disabled: this.isDisabled, checked }])}
onClick={this.onClickIcon}
>
{CheckIcon}
</div>
{Label}
</div>
);
} }
}); });