types(SwipeCell): add SwipeCellInstance type (#9179)

src/swipe-cell/README.md

@@ -146,6 +146,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get SwipeC
 | open  | open SwipeCell  | position: `left \| right` | -            |
 | close | close SwipeCell | -                         | -            |
 
+### Types
+
+Get the type definition of the SwipeCell instance through `SwipeCellInstance`.
+
+```ts
+import { ref } from 'vue';
+import type { SwipeCellInstance } from 'vant';
+
+const swipeCellRef = ref<SwipeCellInstance>();
+
+swipeCellRef.value?.close();
+```
+
 ### 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/swipe-cell/README.zh-CN.md

@@ -155,6 +155,19 @@ beforeClose 的第一个参数为对象，对象中包含以下属性：
 | open   | 打开单元格侧边栏 | position: `left \| right` | -      |
 | close  | 收起单元格侧边栏 | -                         | -      |
 
+### 类型定义
+
+通过 `SwipeCellInstance` 获取 SwipeCell 实例的类型定义。
+
+```ts
+import { ref } from 'vue';
+import type { SwipeCellInstance } from 'vant';
+
+const swipeCellRef = ref<SwipeCellInstance>();
+
+swipeCellRef.value?.close();
+```
+
 ### 样式变量
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。

src/swipe-cell/SwipeCell.tsx

@@ -1,4 +1,12 @@
-import { ref, Ref, reactive, computed, PropType, defineComponent } from 'vue';
+import {
+  ref,
+  Ref,
+  reactive,
+  computed,
+  PropType,
+  defineComponent,
+  ExtractPropTypes,
+} from 'vue';
 
 // Utils
 import { clamp, isDef, createNamespace, preventDefault } from '../utils';
@@ -9,25 +17,33 @@ import { useRect, useClickAway } from '@vant/use';
 import { useTouch } from '../composables/use-touch';
 import { useExpose } from '../composables/use-expose';
 
+// Types
+import type {
+  SwipeCellSide,
+  SwipeCellExpose,
+  SwipeCellPosition,
+} from './types';
+
 const [name, bem] = createNamespace('swipe-cell');
 
-export type SwipeCellSide = 'left' | 'right';
+const props = {
-export type SwipeCellPosition = SwipeCellSide | 'cell' | 'outside';
+  disabled: Boolean,
+  leftWidth: [Number, String],
+  rightWidth: [Number, String],
+  beforeClose: Function as PropType<Interceptor>,
+  stopPropagation: Boolean,
+  name: {
+    type: [Number, String],
+    default: '',
+  },
+};
+
+export type SwipeCellProps = ExtractPropTypes<typeof props>;
 
 export default defineComponent({
   name,
 
-  props: {
+  props,
-    disabled: Boolean,
-    leftWidth: [Number, String],
-    rightWidth: [Number, String],
-    beforeClose: Function as PropType<Interceptor>,
-    stopPropagation: Boolean,
-    name: {
-      type: [Number, String],
-      default: '',
-    },
-  },
 
   emits: ['open', 'close', 'click'],
 
@@ -154,13 +170,14 @@ export default defineComponent({
       }
     };
 
-    const getClickHandler =
+    const getClickHandler = (position: SwipeCellPosition, stop?: boolean) => (
-      (position: SwipeCellPosition, stop?: boolean) => (event: MouseEvent) => {
+      event: MouseEvent
-        if (stop) {
+    ) => {
-          event.stopPropagation();
+      if (stop) {
-        }
+        event.stopPropagation();
-        onClick(position);
+      }
-      };
+      onClick(position);
+    };
 
     const renderSideContent = (
       side: SwipeCellSide,
@@ -180,7 +197,7 @@ export default defineComponent({
       }
     };
 
-    useExpose({
+    useExpose<SwipeCellExpose>({
       open,
       close,
     });

src/swipe-cell/index.ts

@@ -5,3 +5,8 @@ const SwipeCell = withInstall<typeof _SwipeCell>(_SwipeCell);
 
 export default SwipeCell;
 export { SwipeCell };
+export type {
+  SwipeCellSide,
+  SwipeCellPosition,
+  SwipeCellInstance,
+} from './types';

src/swipe-cell/types.ts

@@ -0,0 +1,16 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { SwipeCellProps } from './SwipeCell';
+
+export type SwipeCellSide = 'left' | 'right';
+
+export type SwipeCellPosition = SwipeCellSide | 'cell' | 'outside';
+
+export type SwipeCellExpose = {
+  open: (side: SwipeCellSide) => void;
+  close: (position: SwipeCellPosition) => void;
+};
+
+export type SwipeCellInstance = ComponentPublicInstance<
+  SwipeCellProps,
+  SwipeCellExpose
+>;