diff --git a/src/checkbox-group/CheckboxGroup.tsx b/src/checkbox-group/CheckboxGroup.tsx index cdaff67cd..fced30d92 100644 --- a/src/checkbox-group/CheckboxGroup.tsx +++ b/src/checkbox-group/CheckboxGroup.tsx @@ -4,11 +4,18 @@ import { InjectionKey, defineComponent, ExtractPropTypes, + ComponentPublicInstance, } from 'vue'; + +// Utils import { createNamespace } from '../utils'; + +// Composables import { useChildren } from '@vant/use'; import { useExpose } from '../composables/use-expose'; import { useLinkField } from '../composables/use-link-field'; + +// Types import { CheckerParent, CheckerDirection } from '../checkbox/Checker'; const [name, bem] = createNamespace('checkbox-group'); @@ -32,8 +39,19 @@ export type CheckboxGroupToggleAllOptions = skipDisabled?: boolean; }; +type CheckboxGroupProps = ExtractPropTypes; + +type CheckboxGroupExpose = { + toggleAll: (options?: CheckboxGroupToggleAllOptions) => void; +}; + +export type CheckboxGroupInstance = ComponentPublicInstance< + CheckboxGroupProps, + CheckboxGroupExpose +>; + export type CheckboxGroupProvide = CheckerParent & { - props: ExtractPropTypes; + props: CheckboxGroupProps; updateValue: (value: unknown[]) => void; }; @@ -79,7 +97,7 @@ export default defineComponent({ (value) => emit('change', value) ); - useExpose({ toggleAll }); + useExpose({ toggleAll }); useLinkField(() => props.modelValue); linkChildren({ props, diff --git a/src/checkbox-group/index.ts b/src/checkbox-group/index.ts index cf401922b..c9d09356b 100644 --- a/src/checkbox-group/index.ts +++ b/src/checkbox-group/index.ts @@ -5,4 +5,7 @@ const CheckboxGroup = withInstall(_CheckboxGroup); export default CheckboxGroup; export { CheckboxGroup }; -export type { CheckboxGroupToggleAllOptions } from './CheckboxGroup'; +export type { + CheckboxGroupInstance, + CheckboxGroupToggleAllOptions, +} from './CheckboxGroup'; diff --git a/src/checkbox/README.md b/src/checkbox/README.md index 997c09e81..07588419b 100644 --- a/src/checkbox/README.md +++ b/src/checkbox/README.md @@ -329,15 +329,17 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Checkb ### Types -Get the type definition of the Checkbox instance through `CheckboxInstance`. +Get the type definition of the Checkbox instance through `CheckboxInstance` and `CheckboxGroupInstance`. ```ts import { ref } from 'vue'; -import type { CheckboxInstance } from 'vant'; +import type { CheckboxInstance, CheckboxGroupInstance } from 'vant'; const checkboxRef = ref(); +const checkboxGroupRef = ref(); checkboxRef.value?.toggle(); +checkboxGroupRef.value?.toggleAll(); ``` ### CSS Variables diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md index ce3617157..790b879af 100644 --- a/src/checkbox/README.zh-CN.md +++ b/src/checkbox/README.zh-CN.md @@ -345,17 +345,19 @@ checkboxGroup.toggleAll({ | --- | --- | --- | --- | | toggle | 切换选中状态,传 `true` 为选中,`false` 为取消选中,不传参为取反 | _checked?: boolean_ | - | -### Checkbox 类型定义 +### 类型定义 -通过 `CheckboxInstance` 获取 Checkbox 实例的类型定义。 +通过 `CheckboxInstance` 和 `CheckboxGroupInstance` 获取 Checkbox 实例的类型定义。 ```ts import { ref } from 'vue'; -import type { CheckboxInstance } from 'vant'; +import type { CheckboxInstance, CheckboxGroupInstance } from 'vant'; const checkboxRef = ref(); +const checkboxGroupRef = ref(); checkboxRef.value?.toggle(); +checkboxGroupRef.value?.toggleAll(); ``` ### 样式变量