|
@@ -0,0 +1,74 @@
|
|
|
+import { VantComponent } from '../common/component';
|
|
|
+function emit(target, value) {
|
|
|
+ target.$emit('input', value);
|
|
|
+ target.$emit('change', value);
|
|
|
+}
|
|
|
+VantComponent({
|
|
|
+ field: true,
|
|
|
+ relation: {
|
|
|
+ name: 'checkbox-group',
|
|
|
+ type: 'ancestor',
|
|
|
+ current: 'checkbox',
|
|
|
+ },
|
|
|
+ classes: ['icon-class', 'label-class'],
|
|
|
+ props: {
|
|
|
+ value: Boolean,
|
|
|
+ disabled: Boolean,
|
|
|
+ useIconSlot: Boolean,
|
|
|
+ checkedColor: String,
|
|
|
+ labelPosition: String,
|
|
|
+ labelDisabled: Boolean,
|
|
|
+ shape: {
|
|
|
+ type: String,
|
|
|
+ value: 'round',
|
|
|
+ },
|
|
|
+ iconSize: {
|
|
|
+ type: null,
|
|
|
+ value: 20,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ parentDisabled: false,
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ emitChange(value) {
|
|
|
+ if (this.parent) {
|
|
|
+ this.setParentValue(this.parent, value);
|
|
|
+ } else {
|
|
|
+ emit(this, value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toggle() {
|
|
|
+ const { parentDisabled, disabled, value } = this.data;
|
|
|
+ if (!disabled && !parentDisabled) {
|
|
|
+ this.emitChange(!value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onClickLabel() {
|
|
|
+ const { labelDisabled, parentDisabled, disabled, value } = this.data;
|
|
|
+ if (!disabled && !labelDisabled && !parentDisabled) {
|
|
|
+ this.emitChange(!value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setParentValue(parent, value) {
|
|
|
+ const parentValue = parent.data.value.slice();
|
|
|
+ const { name } = this.data;
|
|
|
+ const { max } = parent.data;
|
|
|
+ if (value) {
|
|
|
+ if (max && parentValue.length >= max) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (parentValue.indexOf(name) === -1) {
|
|
|
+ parentValue.push(name);
|
|
|
+ emit(parent, parentValue);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ const index = parentValue.indexOf(name);
|
|
|
+ if (index !== -1) {
|
|
|
+ parentValue.splice(index, 1);
|
|
|
+ emit(parent, parentValue);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+});
|