From b84774cbc0ce0461900a1a39d680a1d2af03e1de Mon Sep 17 00:00:00 2001 From: junliu666 <2756281618@qq.com> Date: Thu, 16 Jan 2025 14:44:41 +0800 Subject: [PATCH 1/2] feat:swipeCell dragStart&end --- src/swipe-cell/props.ts | 8 ++++++-- src/swipe-cell/swipe-cell.tsx | 30 +++++++++++++++++------------- 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/src/swipe-cell/props.ts b/src/swipe-cell/props.ts index 3a76f92d0..ce04dcc9c 100644 --- a/src/swipe-cell/props.ts +++ b/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, }, - /** 菜单展开或者收回后将菜单的状态传递给父组件，值为数组时表示分别控制左右滑动的展开和收起状态。 */ + /** 菜单展开或者收回后将菜单的状态传递给父组件，值为数组时表示分别控制左右滑动的展开和收起状态 */ onChange: Function as PropType, /** 操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件） */ onClick: Function as PropType, + /** 滑动结束事件 */ + onDragEnd: Function as PropType, + /** 滑动开始事件 */ + onDragStart: Function as PropType, }; diff --git a/src/swipe-cell/swipe-cell.tsx b/src/swipe-cell/swipe-cell.tsx index 57c480c19..3d98451fc 100644 --- a/src/swipe-cell/swipe-cell.tsx +++ b/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; @@ -96,12 +96,14 @@ export default defineComponent({ }; // 首次touchmove的方向，用于分开左右和上下滑动，左右滑动时禁止上下滑动，上下滑动时禁止左右滑动 let swipeDir: -1 | 0 | 1 = 0; + const { lengthX, lengthY, stop } = useSwipe(swipeCellRef, { threshold: 0, onSwipeStart: (e: TouchEvent) => { if (props.disabled) { return; } + setPanelWidth(); swipeDir = 0; initData.moved = false; @@ -114,6 +116,7 @@ export default defineComponent({ if (!swipeDir && absLenX < distance / 2 && absLenY < distance / 2) { return; } + if (!swipeDir && absLenX < absLenY) { swipeDir = -1; } else if (!swipeDir && absLenX >= absLenY) { @@ -128,7 +131,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 +148,7 @@ export default defineComponent({ if (props.disabled) { return; } + props.onDragEnd?.(); initData.moving = false; setTimeout(() => { closedSure.value = false; From 7a6a95f3b16ba78585113b19a9c9c54deafe18e3 Mon Sep 17 00:00:00 2001 From: junliu666 <2756281618@qq.com> Date: Thu, 16 Jan 2025 14:52:13 +0800 Subject: [PATCH 2/2] feat:swipeCell dragstart & dartEnd --- src/swipe-cell/swipe-cell.en-US.md | 4 ++++ src/swipe-cell/swipe-cell.md | 8 ++++++-- src/swipe-cell/swipe-cell.tsx | 3 --- src/swipe-cell/type.ts | 8 ++++++++ 4 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/swipe-cell/swipe-cell.en-US.md b/src/swipe-cell/swipe-cell.en-US.md index 3c7a3d9c2..25be5029e 100644 --- a/src/swipe-cell/swipe-cell.en-US.md +++ b/src/swipe-cell/swipe-cell.en-US.md @@ -14,6 +14,8 @@ 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 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`
slide end event | N +onDragStart | Function | | Typescript：`() => void`
slide start event | 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'`
+drag-end | \- | slide end event +drag-start | \- | slide start event ### SwipeCellInstanceFunctions 组件实例方法 diff --git a/src/swipe-cell/swipe-cell.md b/src/swipe-cell/swipe-cell.md index ea8f7a870..c893b2a7d 100644 --- a/src/swipe-cell/swipe-cell.md +++ b/src/swipe-cell/swipe-cell.md @@ -12,15 +12,19 @@ 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 +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'`
+drag-end | \- | 滑动结束事件 +drag-start | \- | 滑动开始事件 ### SwipeCellInstanceFunctions 组件实例方法 diff --git a/src/swipe-cell/swipe-cell.tsx b/src/swipe-cell/swipe-cell.tsx index 3d98451fc..7670bf768 100644 --- a/src/swipe-cell/swipe-cell.tsx +++ b/src/swipe-cell/swipe-cell.tsx @@ -96,14 +96,12 @@ export default defineComponent({ }; // 首次touchmove的方向，用于分开左右和上下滑动，左右滑动时禁止上下滑动，上下滑动时禁止左右滑动 let swipeDir: -1 | 0 | 1 = 0; - const { lengthX, lengthY, stop } = useSwipe(swipeCellRef, { threshold: 0, onSwipeStart: (e: TouchEvent) => { if (props.disabled) { return; } - setPanelWidth(); swipeDir = 0; initData.moved = false; @@ -116,7 +114,6 @@ export default defineComponent({ if (!swipeDir && absLenX < distance / 2 && absLenY < distance / 2) { return; } - if (!swipeDir && absLenX < absLenY) { swipeDir = -1; } else if (!swipeDir && absLenX >= absLenY) { diff --git a/src/swipe-cell/type.ts b/src/swipe-cell/type.ts index a4e4d7879..40c199a88 100644 --- a/src/swipe-cell/type.ts +++ b/src/swipe-cell/type.ts @@ -40,6 +40,14 @@ export interface TdSwipeCellProps { * 操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件） */ onClick?: (action: SwipeActionItem, source: SwipeSource) => void; + /** + * 滑动结束事件 + */ + onDragEnd?: () => void; + /** + * 滑动开始事件 + */ + onDragStart?: () => void; } /** 组件实例方法 */