diff --git a/src/swipe-cell/props.ts b/src/swipe-cell/props.ts index 3a76f92d0..7160a0bd2 100644 --- a/src/swipe-cell/props.ts +++ b/src/swipe-cell/props.ts @@ -31,8 +31,12 @@ export default { right: { type: [Array, Function] as PropType, }, - /** 菜单展开或者收回后将菜单的状态传递给父组件,值为数组时表示分别控制左右滑动的展开和收起状态。 */ + /** 菜单展开或者收回后将菜单的状态传递给父组件,值为数组时表示分别控制左右滑动的展开和收起状态 */ onChange: Function as PropType, /** 操作项点击时触发(插槽写法组件不触发,业务侧自定义内容和事件) */ onClick: Function as PropType, + /** 滑动结束事件 */ + onDragend: Function as PropType, + /** 滑动开始事件 */ + onDragstart: Function as PropType, }; diff --git a/src/swipe-cell/swipe-cell.en-US.md b/src/swipe-cell/swipe-cell.en-US.md index 3c7a3d9c2..524bfb3f6 100644 --- a/src/swipe-cell/swipe-cell.en-US.md +++ b/src/swipe-cell/swipe-cell.en-US.md @@ -11,9 +11,11 @@ default | String / Slot / Function | - | Typescript:`string \| TNode`。[see m disabled | Boolean | - | \- | N left | Array / Slot / Function | - | Typescript:`Array \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N opened | Boolean / Array | false | Typescript:`boolean \| Array` | N -right | Array / Slot / Function | - | Typescript:`Array \| 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 +right | Array / Slot / Function | - | Typescript:`Array \| TNode` `interface SwipeActionItem {text: string; className?: string; style?: Styles; sure?: Sure; onClick?: () => void; [key: string]: any }` `type Sure = string \| TNode`。[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`
| N onClick | Function | | Typescript:`(action: SwipeActionItem, source: SwipeSource) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swipe-cell/type.ts)。
`type SwipeSource = 'left' \| 'right'`
| N +onDragend | Function | | Typescript:`() => void`
| N +onDragstart | Function | | Typescript:`() => void`
| N ### SwipeCell Events @@ -21,6 +23,8 @@ 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)。
`type SwipeSource = 'left' \| 'right'`
+dragend | \- | \- +dragstart | \- | \- ### SwipeCellInstanceFunctions 组件实例方法 diff --git a/src/swipe-cell/swipe-cell.md b/src/swipe-cell/swipe-cell.md index ea8f7a870..99623694e 100644 --- a/src/swipe-cell/swipe-cell.md +++ b/src/swipe-cell/swipe-cell.md @@ -11,16 +11,20 @@ default | String / Slot / Function | - | 操作项以外的内容,同 content disabled | Boolean | - | 是否禁用滑动 | N left | Array / Slot / Function | - | 左侧滑动操作项。所有行为同 `right`。TS 类型:`Array \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N opened | Boolean / Array | false | 操作项是否呈现为打开态,值为数组时表示分别控制左右滑动的展开和收起状态。TS 类型:`boolean \| Array` | N -right | Array / Slot / Function | - | 右侧滑动操作项。有两种定义方式,一种是使用数组,二种是使用插槽。`right.text` 表示操作文本,`right.className` 表示操作项类名,`right.style` 表示操作项样式,`right.onClick` 表示点击操作项后执行的回调函数。示例:`[{ text: '删除', style: 'background-color: red', onClick: () => {} }]`。TS 类型:`Array \| 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`
菜单展开或者收回后将菜单的状态传递给父组件,值为数组时表示分别控制左右滑动的展开和收起状态。 | N +right | Array / Slot / Function | - | 右侧滑动操作项。有两种定义方式,一种是使用数组,二种是使用插槽。`right.text` 表示操作文本,`right.className` 表示操作项类名,`right.style` 表示操作项样式,`right.onClick` 表示点击操作项后执行的回调函数。示例:`[{ text: '删除', style: 'background-color: red', onClick: () => {} }]`。TS 类型:`Array \| TNode` `interface SwipeActionItem {text: string; className?: string; style?: Styles; sure?: Sure; onClick?: () => void; [key: string]: any }` `type Sure = string \| TNode`。[通用类型定义](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`
菜单展开或者收回后将菜单的状态传递给父组件,值为数组时表示分别控制左右滑动的展开和收起状态 | N onClick | Function | | TS 类型:`(action: SwipeActionItem, source: SwipeSource) => void`
操作项点击时触发(插槽写法组件不触发,业务侧自定义内容和事件)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swipe-cell/type.ts)。
`type SwipeSource = 'left' \| 'right'`
| N +onDragend | Function | | TS 类型:`() => void`
滑动结束事件 | N +onDragstart | Function | | TS 类型:`() => void`
滑动开始事件 | 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)。
`type SwipeSource = 'left' \| 'right'`
+dragend | \- | 滑动结束事件 +dragstart | \- | 滑动开始事件 ### SwipeCellInstanceFunctions 组件实例方法 diff --git a/src/swipe-cell/swipe-cell.tsx b/src/swipe-cell/swipe-cell.tsx index e3992f21c..d8fc838fa 100644 --- a/src/swipe-cell/swipe-cell.tsx +++ b/src/swipe-cell/swipe-cell.tsx @@ -10,8 +10,8 @@ import { onUnmounted, } from 'vue'; import { isArray, isBoolean } from 'lodash-es'; -import { useSwipe } from './useSwipe'; import props from './props'; +import { useSwipe } from './useSwipe'; import config from '../config'; import { SwipeActionItem, SwipeSource } from './type'; import { useClickAway } from '../shared'; @@ -105,6 +105,7 @@ export default defineComponent({ swipeDir = 0; initData.moved = false; initData.offset = initData.pos; + props.onDragstart?.(); }, onSwipe: (e: TouchEvent) => { const absLenX = Math.abs(lengthX.value); @@ -127,7 +128,6 @@ export default defineComponent({ if (props.disabled || (!initData.moved && Math.abs(lengthX.value) < distance)) { return; } - if (showSureRight.value) { closedSure.value = lengthX.value > 0 && initData.pos === 0; showSureRight.value = false; @@ -144,6 +144,7 @@ export default defineComponent({ if (props.disabled) { return; } + props.onDragend?.(); initData.moving = false; setTimeout(() => { closedSure.value = false; diff --git a/src/swipe-cell/type.ts b/src/swipe-cell/type.ts index a4e4d7879..8e651ca2b 100644 --- a/src/swipe-cell/type.ts +++ b/src/swipe-cell/type.ts @@ -4,7 +4,7 @@ * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC * */ -import { TNode } from '../common'; +import { TNode, Styles } from '../common'; export interface TdSwipeCellProps { /** @@ -33,13 +33,21 @@ export interface TdSwipeCellProps { */ right?: Array | TNode; /** - * 菜单展开或者收回后将菜单的状态传递给父组件,值为数组时表示分别控制左右滑动的展开和收起状态。 + * 菜单展开或者收回后将菜单的状态传递给父组件,值为数组时表示分别控制左右滑动的展开和收起状态 */ onChange?: (value: string) => void; /** * 操作项点击时触发(插槽写法组件不触发,业务侧自定义内容和事件) */ onClick?: (action: SwipeActionItem, source: SwipeSource) => void; + /** + * 滑动结束事件 + */ + onDragend?: () => void; + /** + * 滑动开始事件 + */ + onDragstart?: () => void; } /** 组件实例方法 */ @@ -53,10 +61,12 @@ export interface SwipeCellInstanceFunctions { export interface SwipeActionItem { text: string; className?: string; - style?: string; - sure?: string | TNode; + style?: Styles; + sure?: Sure; onClick?: () => void; [key: string]: any; } +export type Sure = string | TNode; + export type SwipeSource = 'left' | 'right'; diff --git a/src/swipe-cell/useSwipe.ts b/src/swipe-cell/useSwipe.ts index bd6e72a6a..4636e4a78 100644 --- a/src/swipe-cell/useSwipe.ts +++ b/src/swipe-cell/useSwipe.ts @@ -121,7 +121,6 @@ export function useSwipe( const [x, y] = getTouchEventCoords(e); updateCoordsStart(x, y); updateCoordsEnd(x, y); - onSwipeStart?.(e); }, listenerOptions, ), @@ -133,7 +132,11 @@ export function useSwipe( if (e.touches.length !== 1) return; const [x, y] = getTouchEventCoords(e); updateCoordsEnd(x, y); - if (!isSwiping.value && isThresholdExceeded.value) isSwiping.value = true; + if (!isSwiping.value && isThresholdExceeded.value) { + isSwiping.value = true; + onSwipeStart?.(e); + } + if (isSwiping.value) onSwipe?.(e); }, listenerOptions,