From 9e7c2eb22826ae9e087060e1aeb4da6410177c9c Mon Sep 17 00:00:00 2001 From: jahnli Date: Tue, 14 Nov 2023 22:52:33 +0800 Subject: [PATCH 1/3] feat(n-slider): add `on-dragstart` `on-dragend` prop --- CHANGELOG.en-US.md | 1 + CHANGELOG.zh-CN.md | 1 + src/slider/demos/enUS/index.demo-entry.md | 2 ++ src/slider/demos/zhCN/index.demo-entry.md | 2 ++ src/slider/src/Slider.tsx | 6 +++++- 5 files changed, 11 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 5867e76000b..f72b46e003e 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -25,6 +25,7 @@ - `n-upload` adds `file-list-class` and `trigger-class` props. - `n-dynamic-input` adds `input-class` and `tag-class` props. - `n-dynamic-input` adds `item-class` prop. +- `n-slider` adds `on-dragstart` `on-dragend` prop, closes [#5365](https://github.com/tusen-ai/naive-ui/issues/5365). ## 2.35.0 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 4768449ca56..8fb497ddf90 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -25,6 +25,7 @@ - `n-upload` 新增 `file-list-class` 和 `trigger-class` 属性 - `n-dynamic-input` 新增 `input-class` 和 `tag-class` 属性 - `n-dynamic-input` 新增 `item-class` 属性 +- `n-slider` 新增 `on-dragstart` `on-dragend` 属性，关闭 [#5365](https://github.com/tusen-ai/naive-ui/issues/5365) ## 2.35.0 diff --git a/src/slider/demos/enUS/index.demo-entry.md b/src/slider/demos/enUS/index.demo-entry.md index 11dceed7b6e..d0978628415 100644 --- a/src/slider/demos/enUS/index.demo-entry.md +++ b/src/slider/demos/enUS/index.demo-entry.md @@ -41,6 +41,8 @@ custom-thumb.vue | vertical | `boolean` | `false` | Whether to enable vertical mode. | | | value | `number \| [number, number] \| null` | `undefined` | Value of the slider. | | | on-update:value | `(value: number \| [number, number]) => void` | `undefined` | Callback on value update. | | +| on-dragstart | `() => void` | `undefined` | Start dragging the callback function. | | +| on-dragend | `() => void` | `undefined` | Drag the end of the callback function. | | ### Slider Slots diff --git a/src/slider/demos/zhCN/index.demo-entry.md b/src/slider/demos/zhCN/index.demo-entry.md index 11d5c1ba196..c2aa079d223 100644 --- a/src/slider/demos/zhCN/index.demo-entry.md +++ b/src/slider/demos/zhCN/index.demo-entry.md @@ -42,6 +42,8 @@ keyboard-debug.vue | vertical | `boolean` | `false` | 是否启用垂直模式 | | | value | `number \| [number, number] \| null` | `undefined` | 值 | | | on-update:value | `(value: number \| [number, number]) => void` | `undefined` | 值更新的回调 | | +| on-dragstart | `() => void` | `undefined` | 开始拖拽的回调函数 | | +| on-dragend | `() => void` | `undefined` | 拖拽结束的回调函数 | | ### Slider Slots diff --git a/src/slider/src/Slider.tsx b/src/slider/src/Slider.tsx index e1a3f47a6ac..827aafc69f5 100644 --- a/src/slider/src/Slider.tsx +++ b/src/slider/src/Slider.tsx @@ -96,7 +96,9 @@ export const sliderProps = { >, onUpdateValue: [Function, Array] as PropType< MaybeArray<(value: number & number[]) => void> - > + >, + onDragstart: [Function] as PropType<() => void>, + onDragend: [Function] as PropType<() => void> } as const export type SliderProps = ExtractPublicPropTypes @@ -466,6 +468,7 @@ export default defineComponent({ function startDragging (): void { if (!draggingRef.value) { draggingRef.value = true + if (props.onDragstart) call(props.onDragstart) on('touchend', document, handleMouseUp) on('mouseup', document, handleMouseUp) on('touchmove', document, handleMouseMove) @@ -475,6 +478,7 @@ export default defineComponent({ function stopDragging (): void { if (draggingRef.value) { draggingRef.value = false + if (props.onDragend) call(props.onDragend) off('touchend', document, handleMouseUp) off('mouseup', document, handleMouseUp) off('touchmove', document, handleMouseMove) From 69c021b4a07454664efa0af4d94fc7b2692af239 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sun, 3 Dec 2023 18:37:21 +0800 Subject: [PATCH 2/3] Update src/slider/demos/zhCN/index.demo-entry.md --- src/slider/demos/zhCN/index.demo-entry.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/slider/demos/zhCN/index.demo-entry.md b/src/slider/demos/zhCN/index.demo-entry.md index c2aa079d223..a63ed8ab3ac 100644 --- a/src/slider/demos/zhCN/index.demo-entry.md +++ b/src/slider/demos/zhCN/index.demo-entry.md @@ -42,8 +42,8 @@ keyboard-debug.vue | vertical | `boolean` | `false` | 是否启用垂直模式 | | | value | `number \| [number, number] \| null` | `undefined` | 值 | | | on-update:value | `(value: number \| [number, number]) => void` | `undefined` | 值更新的回调 | | -| on-dragstart | `() => void` | `undefined` | 开始拖拽的回调函数 | | -| on-dragend | `() => void` | `undefined` | 拖拽结束的回调函数 | | +| on-dragstart | `() => void` | `undefined` | 开始拖拽的回调函数 | NEXT_VERSION | +| on-dragend | `() => void` | `undefined` | 拖拽结束的回调函数 | NEXT_VERSION | ### Slider Slots From 0f19e2a036b87633b27f1dfa03a262bd7ed3fe8c Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sun, 3 Dec 2023 18:37:32 +0800 Subject: [PATCH 3/3] Update src/slider/demos/enUS/index.demo-entry.md --- src/slider/demos/enUS/index.demo-entry.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/slider/demos/enUS/index.demo-entry.md b/src/slider/demos/enUS/index.demo-entry.md index d0978628415..245dbdd36dd 100644 --- a/src/slider/demos/enUS/index.demo-entry.md +++ b/src/slider/demos/enUS/index.demo-entry.md @@ -41,8 +41,8 @@ custom-thumb.vue | vertical | `boolean` | `false` | Whether to enable vertical mode. | | | value | `number \| [number, number] \| null` | `undefined` | Value of the slider. | | | on-update:value | `(value: number \| [number, number]) => void` | `undefined` | Callback on value update. | | -| on-dragstart | `() => void` | `undefined` | Start dragging the callback function. | | -| on-dragend | `() => void` | `undefined` | Drag the end of the callback function. | | +| on-dragstart | `() => void` | `undefined` | Start dragging the callback function. | NEXT_VERSION | +| on-dragend | `() => void` | `undefined` | Drag the end of the callback function. | NEXT_VERSION | ### Slider Slots