swipeCell: dragStart & dragEnd

src/swipe-cell/props.ts

@@ -4,8 +4,8 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TdSwipeCellProps } from './type';
 import { PropType } from 'vue';
+import { TdSwipeCellProps } from './type';
 
 export default {
   /** 操作项以外的内容 */
@@ -31,8 +31,12 @@ export default {
   right: {
     type: [Array, Function] as PropType<TdSwipeCellProps['right']>,
   },
-  /** 菜单展开或者收回后将菜单的状态传递给父组件，值为数组时表示分别控制左右滑动的展开和收起状态。 */
+  /** 菜单展开或者收回后将菜单的状态传递给父组件，值为数组时表示分别控制左右滑动的展开和收起状态 */
   onChange: Function as PropType<TdSwipeCellProps['onChange']>,
   /** 操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件） */
   onClick: Function as PropType<TdSwipeCellProps['onClick']>,
+  /** 滑动结束事件 */
+  onDragEnd: Function as PropType<TdSwipeCellProps['onDragEnd']>,
+  /** 滑动开始事件 */
+  onDragStart: Function as PropType<TdSwipeCellProps['onDragStart']>,
 };

src/swipe-cell/swipe-cell.en-US.md

@@ -14,13 +14,17 @@ opened | Boolean / Array | false | Typescript：`boolean \| Array<boolean>` | N
 right | Array / Slot / Function | - | Typescript：`Array<SwipeActionItem> \| TNode` `interface SwipeActionItem {text: string; className?: string; style?: string; sure?: string \| TNode; onClick?: () => void; [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swipe-cell/type.ts) | N
 onChange | Function |  | Typescript：`(value: string) => void`<br/> | N
 onClick | Function |  | Typescript：`(action: SwipeActionItem, source: SwipeSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/> | N
+onDragEnd | Function |  | Typescript：`() => void`<br/>slide end event | N
+onDragStart | Function |  | Typescript：`() => void`<br/>slide start event | N
 
 ### SwipeCell Events
 
 name | params | description
 -- | -- | --
 change | `(value: string)` | \-
 click | `(action: SwipeActionItem, source: SwipeSource)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/>
+drag-end | \- | slide end event
+drag-start | \- | slide start event
 
 ### SwipeCellInstanceFunctions 组件实例方法
 

src/swipe-cell/swipe-cell.md

@@ -12,15 +12,19 @@ disabled | Boolean | - | 是否禁用滑动 | N
 left | Array / Slot / Function | - | 左侧滑动操作项。所有行为同 `right`。TS 类型：`Array<SwipeActionItem> \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 opened | Boolean / Array | false | 操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态。TS 类型：`boolean \| Array<boolean>` | N
 right | Array / Slot / Function | - | 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', style: 'background-color: red', onClick: () => {} }]`。TS 类型：`Array<SwipeActionItem> \| TNode` `interface SwipeActionItem {text: string; className?: string; style?: string; sure?: string \| TNode; onClick?: () => void; [key: string]: any }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swipe-cell/type.ts) | N
-onChange | Function |  | TS 类型：`(value: string) => void`<br/>菜单展开或者收回后将菜单的状态传递给父组件，值为数组时表示分别控制左右滑动的展开和收起状态。 | N
+onChange | Function |  | TS 类型：`(value: string) => void`<br/>菜单展开或者收回后将菜单的状态传递给父组件，值为数组时表示分别控制左右滑动的展开和收起状态 | N
 onClick | Function |  | TS 类型：`(action: SwipeActionItem, source: SwipeSource) => void`<br/>操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件）。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/> | N
+onDragEnd | Function |  | TS 类型：`() => void`<br/>滑动结束事件 | N
+onDragStart | Function |  | TS 类型：`() => void`<br/>滑动开始事件 | N
 
 ### SwipeCell Events
 
 名称 | 参数 | 描述
 -- | -- | --
-change | `(value: string)` | 菜单展开或者收回后将菜单的状态传递给父组件，值为数组时表示分别控制左右滑动的展开和收起状态。
+change | `(value: string)` | 菜单展开或者收回后将菜单的状态传递给父组件，值为数组时表示分别控制左右滑动的展开和收起状态
 click | `(action: SwipeActionItem, source: SwipeSource)` | 操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件）。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/>
+drag-end | \- | 滑动结束事件
+drag-start | \- | 滑动开始事件
 
 ### SwipeCellInstanceFunctions 组件实例方法
 

src/swipe-cell/swipe-cell.tsx

@@ -1,25 +1,25 @@
+import isArray from 'lodash/isArray';
+import isBoolean from 'lodash/isBoolean';
 import {
-  ref,
-  watch,
-  reactive,
   computed,
-  onMounted,
   defineComponent,
   getCurrentInstance,
-  StyleValue,
+  onMounted,
   onUnmounted,
+  reactive,
+  ref,
+  StyleValue,
+  watch,
 } from 'vue';
-import isArray from 'lodash/isArray';
-import isBoolean from 'lodash/isBoolean';
-import { useSwipe } from './useSwipe';
-import props from './props';
 import config from '../config';
-import { SwipeActionItem, SwipeSource } from './type';
+import { useContent, useTNodeJSX } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useClass';
 import { useClickAway } from '../shared';
 import { preventDefault } from '../shared/dom';
+import props from './props';
+import { SwipeActionItem, SwipeSource } from './type';
 import { useSureConfirm } from './useSureConfirm';
-import { useContent, useTNodeJSX } from '../hooks/tnode';
-import { usePrefixClass } from '../hooks/useClass';
+import { useSwipe } from './useSwipe';
 
 const { prefix } = config;
 
@@ -128,7 +128,7 @@ export default defineComponent({
         if (props.disabled || (!initData.moved && Math.abs(lengthX.value) < distance)) {
           return;
         }
-
+        props.onDragStart?.();
         if (showSureRight.value) {
           closedSure.value = lengthX.value > 0 && initData.pos === 0;
           showSureRight.value = false;
@@ -145,6 +145,7 @@ export default defineComponent({
         if (props.disabled) {
           return;
         }
+        props.onDragEnd?.();
         initData.moving = false;
         setTimeout(() => {
           closedSure.value = false;

src/swipe-cell/type.ts

@@ -40,6 +40,14 @@ export interface TdSwipeCellProps {
    * 操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件）
    */
   onClick?: (action: SwipeActionItem, source: SwipeSource) => void;
+  /**
+   * 滑动结束事件
+   */
+  onDragEnd?: () => void;
+  /**
+   * 滑动开始事件
+   */
+  onDragStart?: () => void;
 }
 
 /** 组件实例方法 */