Files
vant/src/checkbox/Checkbox.tsx
neverland bd609e1df0 perf: add truthProp util (#8522)
* perf: add TruthyProp util

* chore: rename

* chore: upd
2021-04-14 10:26:21 +08:00

96 lines
2.2 KiB
TypeScript

import { computed, watch, defineComponent } from 'vue';
// Utils
import { createNamespace, extend, pick, truthProp } from '../utils';
import {
CHECKBOX_GROUP_KEY,
CheckboxGroupProvide,
} from '../checkbox-group/CheckboxGroup';
// Composables
import { useParent } from '@vant/use';
import { useExpose } from '../composables/use-expose';
import { useLinkField } from '../composables/use-link-field';
// Components
import Checker, { checkerProps } from './Checker';
const [name, bem] = createNamespace('checkbox');
export default defineComponent({
name,
props: extend({}, checkerProps, {
bindGroup: truthProp,
}),
emits: ['change', 'update:modelValue'],
setup(props, { emit, slots }) {
const { parent } = useParent<CheckboxGroupProvide>(CHECKBOX_GROUP_KEY);
const setParentValue = (checked: boolean) => {
const { name } = props;
const { max, modelValue } = parent!.props;
const value = modelValue.slice();
if (checked) {
const overlimit = max && value.length >= max;
if (!overlimit && !value.includes(name)) {
value.push(name);
if (props.bindGroup) {
parent!.updateValue(value);
}
}
} else {
const index = value.indexOf(name);
if (index !== -1) {
value.splice(index, 1);
if (props.bindGroup) {
parent!.updateValue(value);
}
}
}
};
const checked = computed(() => {
if (parent && props.bindGroup) {
return parent.props.modelValue.indexOf(props.name) !== -1;
}
return !!props.modelValue;
});
const toggle = (newValue = !checked.value) => {
if (parent && props.bindGroup) {
setParentValue(newValue);
} else {
emit('update:modelValue', newValue);
}
};
watch(
() => props.modelValue,
(value) => emit('change', value)
);
useExpose({ toggle, props, checked });
useLinkField(() => props.modelValue);
return () => (
<Checker
v-slots={pick(slots, ['default', 'icon'])}
bem={bem}
role="checkbox"
parent={parent}
checked={checked.value}
onToggle={toggle}
{...props}
/>
);
},
});