diff --git a/src/checkbox/Checkbox.tsx b/src/checkbox/Checkbox.tsx index 976b45df6..8d241bc19 100644 --- a/src/checkbox/Checkbox.tsx +++ b/src/checkbox/Checkbox.tsx @@ -1,4 +1,11 @@ -import { computed, watch, defineComponent } from 'vue'; +import { + watch, + computed, + ComputedRef, + defineComponent, + ExtractPropTypes, + ComponentPublicInstance, +} from 'vue'; // Utils import { createNamespace, extend, pick, truthProp } from '../utils'; @@ -14,12 +21,33 @@ import Checker, { checkerProps } from './Checker'; const [name, bem] = createNamespace('checkbox'); +const props = extend({}, checkerProps, { + bindGroup: truthProp, +}); + +type CheckboxProps = ExtractPropTypes; + +type CheckboxExpose = { + toggle: (newValue?: boolean) => void; + /** + * @private + */ + props: CheckboxProps; + /** + * @private + */ + checked: ComputedRef; +}; + +export type CheckboxInstance = ComponentPublicInstance< + CheckboxProps, + CheckboxExpose +>; + export default defineComponent({ name, - props: extend({}, checkerProps, { - bindGroup: truthProp, - }), + props, emits: ['change', 'update:modelValue'], @@ -74,7 +102,7 @@ export default defineComponent({ (value) => emit('change', value) ); - useExpose({ toggle, props, checked }); + useExpose({ toggle, props, checked }); useLinkField(() => props.modelValue); return () => ( diff --git a/src/checkbox/README.md b/src/checkbox/README.md index 12b2518d4..997c09e81 100644 --- a/src/checkbox/README.md +++ b/src/checkbox/README.md @@ -327,6 +327,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Checkb | ------ | ------------------- | ------------------- | ------------ | | toggle | Toggle check status | _checked?: boolean_ | - | +### Types + +Get the type definition of the Checkbox instance through `CheckboxInstance`. + +```ts +import { ref } from 'vue'; +import type { CheckboxInstance } from 'vant'; + +const checkboxRef = ref(); + +checkboxRef.value?.toggle(); +``` + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md index cc28d4e77..ce3617157 100644 --- a/src/checkbox/README.zh-CN.md +++ b/src/checkbox/README.zh-CN.md @@ -345,6 +345,19 @@ checkboxGroup.toggleAll({ | --- | --- | --- | --- | | toggle | 切换选中状态,传 `true` 为选中,`false` 为取消选中,不传参为取反 | _checked?: boolean_ | - | +### Checkbox 类型定义 + +通过 `CheckboxInstance` 获取 Checkbox 实例的类型定义。 + +```ts +import { ref } from 'vue'; +import type { CheckboxInstance } from 'vant'; + +const checkboxRef = ref(); + +checkboxRef.value?.toggle(); +``` + ### 样式变量 组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/checkbox/index.ts b/src/checkbox/index.ts index a02bf34d5..0218243f4 100644 --- a/src/checkbox/index.ts +++ b/src/checkbox/index.ts @@ -5,3 +5,4 @@ const Checkbox = withInstall(_Checkbox); export default Checkbox; export { Checkbox }; +export type { CheckboxInstance } from './Checkbox';