ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2026-04-26 01:01:51 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat(SwipeCell): add customizable threshold prop for swipe actions (#13792)

Browse Source 
Co-authored-by: 姜大伟 <jiangdawei@mysteel.com>
Co-authored-by: neverland <jait.chen@foxmail.com>
This commit is contained in:
jiang
2026-03-26 23:02:14 +08:00
committed by GitHub
parent bd70834e28
commit 2cf59ee43c
3 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/vant/src/swipe-cell/README.md
+1
View File
@@ -112,6 +112,7 @@ export default {
| name | Identifier of SwipeCell, usually a unique string or number | _number \| string_ | - | | name | Identifier of SwipeCell, usually a unique string or number | _number \| string_ | - |
| left-width | Width of the left swipe area | _number \| string_ | `auto` | | left-width | Width of the left swipe area | _number \| string_ | `auto` |
| right-width | Width of the right swipe area | _number \| string_ | `auto` | | right-width | Width of the right swipe area | _number \| string_ | `auto` |
| threshold | Swipe threshold (ratio of swipe distance to side width) | _number \| string_ | `0.15` |
| before-close | Callback function before close | _(args) => boolean \| Promise\<boolean\>_ | - | | before-close | Callback function before close | _(args) => boolean \| Promise\<boolean\>_ | - |
| disabled | Whether to disabled swipe | _boolean_ | `false` | | disabled | Whether to disabled swipe | _boolean_ | `false` |
| stop-propagation | Whether to stop touchmove event propagation | _boolean_ | `false` | | stop-propagation | Whether to stop touchmove event propagation | _boolean_ | `false` |
packages/vant/src/swipe-cell/README.zh-CN.md
+1
View File
@@ -119,6 +119,7 @@ export default {
| name | 标识符，通常为一个唯一的字符串或数字，可以在事件参数中获取到 | _number \| string_ | `''` | | name | 标识符，通常为一个唯一的字符串或数字，可以在事件参数中获取到 | _number \| string_ | `''` |
| left-width | 指定左侧滑动区域宽度，单位为 `px` | _number \| string_ | `auto` | | left-width | 指定左侧滑动区域宽度，单位为 `px` | _number \| string_ | `auto` |
| right-width | 指定右侧滑动区域宽度，单位为 `px` | _number \| string_ | `auto` | | right-width | 指定右侧滑动区域宽度，单位为 `px` | _number \| string_ | `auto` |
| threshold | 滑动触发阈值（滑动距离与滑动区域宽度的比例） | _number \| string_ | `0.15` |
| before-close | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(args) => boolean \| Promise\<boolean\>_ | - | | before-close | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(args) => boolean \| Promise\<boolean\>_ | - |
| disabled | 是否禁用滑动 | _boolean_ | `false` | | disabled | 是否禁用滑动 | _boolean_ | `false` |
| stop-propagation | 是否阻止滑动事件冒泡 | _boolean_ | `false` | | stop-propagation | 是否阻止滑动事件冒泡 | _boolean_ | `false` |
packages/vant/src/swipe-cell/SwipeCell.tsx
+7 -2
View File
@@ -39,6 +39,11 @@ export const swipeCellProps = {
disabled: Boolean, disabled: Boolean,
leftWidth: numericProp, leftWidth: numericProp,
rightWidth: numericProp, rightWidth: numericProp,
threshold: {
type: numericProp,
default: 0.15,
validator: (value: number | string) => +value >= 0 && +value <= 1,
},
beforeClose: Function as PropType<Interceptor>, beforeClose: Function as PropType<Interceptor>,
stopPropagation: Boolean, stopPropagation: Boolean,
}; };
@@ -106,8 +111,8 @@ export default defineComponent({
const toggle = (side: SwipeCellSide) => { const toggle = (side: SwipeCellSide) => {
const offset = Math.abs(state.offset); const offset = Math.abs(state.offset);
const THRESHOLD = 0.15; const thresholdValue = +props.threshold;
const threshold = opened ? 1 - THRESHOLD : THRESHOLD; const threshold = opened ? 1 - thresholdValue : thresholdValue;
const width = side === 'left' ? leftWidth.value : rightWidth.value; const width = side === 'left' ? leftWidth.value : rightWidth.value;
if (width && offset > width * threshold) { if (width && offset > width * threshold) {