github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: checkbox add disabled context

pull/6266/head^2
tangjinzhou 2023-02-14 13:58:37 +08:00
parent 19ec975deb
commit 7de1be6a9a
1 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/checkbox/Checkbox.tsx
View File

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