types(CollapseItem): add CollapseItemInstance type (#9194)

src/collapse-item/CollapseItem.tsx

@@ -1,4 +1,11 @@
-import { ref, watch, computed, nextTick, defineComponent } from 'vue';
+import {
+  ref,
+  watch,
+  computed,
+  nextTick,
+  defineComponent,
+  ExtractPropTypes,
+} from 'vue';
 
 // Utils
 import { cellProps } from '../cell/Cell';
@@ -17,15 +24,19 @@ const [name, bem] = createNamespace('collapse-item');
 
 const CELL_SLOTS = ['icon', 'title', 'value', 'label', 'right-icon'] as const;
 
+const props = extend({}, cellProps, {
+  name: [Number, String],
+  isLink: truthProp,
+  disabled: Boolean,
+  readonly: Boolean,
+});
+
+export type CollapseItemProps = ExtractPropTypes<typeof props>;
+
 export default defineComponent({
   name,
 
-  props: extend({}, cellProps, {
+  props,
-    name: [Number, String],
-    isLink: truthProp,
-    disabled: Boolean,
-    readonly: Boolean,
-  }),
 
   setup(props, { slots }) {
     const wrapperRef = ref<HTMLElement>();

src/collapse-item/index.ts

@@ -5,3 +5,4 @@ const CollapseItem = withInstall<typeof _CollapseItem>(_CollapseItem);
 
 export default CollapseItem;
 export { CollapseItem };
+export type { CollapseItemInstance } from './types';

src/collapse-item/types.ts

@@ -0,0 +1,11 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { CollapseItemProps } from './CollapseItem';
+
+export type CollapseItemExpose = {
+  toggle: (newValue?: boolean) => void;
+};
+
+export type CollapseItemInstance = ComponentPublicInstance<
+  CollapseItemProps,
+  CollapseItemExpose
+>;

src/collapse/README.md

@@ -142,6 +142,27 @@ export default {
 | value-class | Value className | _string_ | - |
 | label-class | Label className | _string_ | - |
 
+### CollapseItem Methods
+
+Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get CollapseItem instance and call instance methods.
+
+| Name   | Description            | Attribute           | Return value |
+| ------ | ---------------------- | ------------------- | ------------ |
+| toggle | Toggle expanded status | _expanded: boolean_ | -            |
+
+### Types
+
+Get the type definition of the CollapseItem instance through `CollapseItemInstance`.
+
+```ts
+import { ref } from 'vue';
+import type { CollapseItemInstance } from 'vant';
+
+const collapseItemRef = ref<CollapseItemInstance>();
+
+collapseItemRef.value?.toggle();
+```
+
 ### CollapseItem Slots
 
 | Name           | Description              |
@@ -153,14 +174,6 @@ export default {
 | icon           | Custom header left icon  |
 | right-icon     | Custom header right icon |
 
-### CollapseItem Methods
-
-Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get CollapseItem instance and call instance methods.
-
-| Name   | Description            | Attribute           | Return value |
-| ------ | ---------------------- | ------------------- | ------------ |
-| toggle | Toggle expanded status | _expanded: boolean_ | -            |
-
 ### 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).

src/collapse/README.zh-CN.md

@@ -140,6 +140,27 @@ export default {
 | value-class | 右侧内容额外类名 | _string_ | - |
 | label-class | 描述信息额外类名 | _string_ | - |
 
+### CollapseItem 方法
+
+通过 ref 可以获取到 CollapseItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| toggle | 切换面试展开状态，传 `true` 为展开，`false` 为收起，不传参为切换 | _expand?: boolean_ | - |
+
+### 类型定义
+
+通过 `CollapseItemInstance` 获取 CollapseItem 实例的类型定义。
+
+```ts
+import { ref } from 'vue';
+import type { CollapseItemInstance } from 'vant';
+
+const collapseItemRef = ref<CollapseItemInstance>();
+
+collapseItemRef.value?.toggle();
+```
+
 ### CollapseItem Slots
 
 | 名称           | 说明                 |
@@ -151,14 +172,6 @@ export default {
 | icon           | 自定义标题栏左侧图标 |
 | right-icon     | 自定义标题栏右侧图标 |
 
-### CollapseItem 方法
-
-通过 ref 可以获取到 CollapseItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
-
-| 方法名 | 说明 | 参数 | 返回值 |
-| --- | --- | --- | --- |
-| toggle | 切换面试展开状态，传 `true` 为展开，`false` 为收起，不传参为切换 | _expand?: boolean_ | - |
-
 ### 样式变量
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。