diff --git a/src/collapse-item/CollapseItem.tsx b/src/collapse-item/CollapseItem.tsx index cbd930267..eedcc4169 100644 --- a/src/collapse-item/CollapseItem.tsx +++ b/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; + export default defineComponent({ name, - props: extend({}, cellProps, { - name: [Number, String], - isLink: truthProp, - disabled: Boolean, - readonly: Boolean, - }), + props, setup(props, { slots }) { const wrapperRef = ref(); diff --git a/src/collapse-item/index.ts b/src/collapse-item/index.ts index 1c6a54f29..f873c2e44 100644 --- a/src/collapse-item/index.ts +++ b/src/collapse-item/index.ts @@ -5,3 +5,4 @@ const CollapseItem = withInstall(_CollapseItem); export default CollapseItem; export { CollapseItem }; +export type { CollapseItemInstance } from './types'; diff --git a/src/collapse-item/types.ts b/src/collapse-item/types.ts new file mode 100644 index 000000000..67ca6e723 --- /dev/null +++ b/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 +>; diff --git a/src/collapse/README.md b/src/collapse/README.md index 9efd1cddc..a9066419b 100644 --- a/src/collapse/README.md +++ b/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(); + +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). diff --git a/src/collapse/README.zh-CN.md b/src/collapse/README.zh-CN.md index 8f9951b14..740c79385 100644 --- a/src/collapse/README.zh-CN.md +++ b/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(); + +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)。