feat: checkbox add disabled context

This commit is contained in:
tangjinzhou 2023-02-14 13:58:37 +08:00
parent 19ec975deb
commit 7de1be6a9a

View File

@ -1,5 +1,13 @@
import type { CSSProperties } from 'vue';
import { watchEffect, onMounted, defineComponent, inject, onBeforeUnmount, ref } from 'vue';
import {
computed,
watchEffect,
onMounted,
defineComponent,
inject,
onBeforeUnmount,
ref,
} from 'vue';
import classNames from '../_util/classNames';
import VcCheckbox from '../vc-checkbox/Checkbox';
import { flattenChildren } from '../_util/props-util';
@ -24,14 +32,16 @@ export default defineComponent({
setup(props, { emit, attrs, slots, expose }) {
const formItemContext = useInjectFormItemContext();
const formItemInputContext = FormItemInputContext.useInject();
const { prefixCls, direction } = useConfigInject('checkbox', props);
const { prefixCls, direction, disabled } = useConfigInject('checkbox', props);
// style
const [wrapSSR, hashId] = useStyle(prefixCls);
const checkboxGroup = inject(CheckboxGroupContextKey, undefined);
const uniId = Symbol('checkboxUniId');
const mergedDisabled = computed(() => {
return checkboxGroup?.disabled.value || disabled.value;
});
watchEffect(() => {
if (!props.skipGroup && checkboxGroup) {
checkboxGroup.registerValue(uniId, props.value);
@ -82,7 +92,7 @@ export default defineComponent({
checkboxGroup.toggleOption({ label: children, value: props.value });
};
checkboxProps.name = checkboxGroup.name.value;
checkboxProps.checked = checkboxGroup.mergedValue.value.indexOf(props.value) !== -1;
checkboxProps.checked = checkboxGroup.mergedValue.value.includes(props.value);
checkboxProps.disabled = props.disabled || checkboxGroup.disabled.value;
checkboxProps.indeterminate = indeterminate;
} else {
@ -118,6 +128,7 @@ export default defineComponent({
{...checkboxProps}
class={checkboxClass}
ref={checkboxRef}
disabled={mergedDisabled.value}
/>
{children.length ? <span>{children}</span> : null}
</label>,