From 1a20b21d285bc008f6a45fad132bc808a377f853 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期日, 19 一月 2025 11:21:31 +0800
Subject: [PATCH] 对话修改
---
src/hooks/useDrag.ts | 46 ++++++++++++++++++++++++++++++++++++++++------
1 files changed, 40 insertions(+), 6 deletions(-)
diff --git a/src/hooks/useDrag.ts b/src/hooks/useDrag.ts
index f3b32d1..8074b76 100644
--- a/src/hooks/useDrag.ts
+++ b/src/hooks/useDrag.ts
@@ -1,16 +1,38 @@
+import type { Ref } from 'vue';
import { computed, ref } from 'vue';
export type UseDragOptions = {
- target: HTMLElement;
- onDrag: (e: MouseEvent) => void;
- onDragEnd: (e: MouseEvent) => void;
+ /**
+ * 鎷栨嫿鎵嬫焺鍏冪礌鐨勯�夋嫨鍣�
+ */
+ handle?: string | HTMLElement | Ref<HTMLElement>;
};
-export const useDrag = () => {
+const getHandleElement = (handle: string | HTMLElement | Ref<HTMLElement>) => {
+ if (!handle) return null;
+ if (typeof handle === 'string') {
+ return document.querySelector(handle);
+ } else if (handle instanceof HTMLElement) {
+ return handle;
+ } else if (typeof handle === 'object' && 'value' in handle) {
+ return handle.value;
+ }
+ return null;
+};
+
+export const useDrag = (options: UseDragOptions = {}) => {
+ const { handle } = options;
const isDragging = ref(false);
const startPos = ref({ x: 0, y: 0 });
const offset = ref({ x: 0, y: 0 });
const startDrag = (e: MouseEvent) => {
+ // 濡傛灉璁剧疆浜唄andle,鍒欏垽鏂簨浠舵簮鏄惁鏄痟andle鍏冪礌鎴栧叾瀛愬厓绱�
+ if (handle) {
+ const handleElement = getHandleElement(handle);
+ if (!handleElement?.contains(e.target as Node)) {
+ return;
+ }
+ }
isDragging.value = true;
startPos.value = {
x: e.clientX - offset.value.x,
@@ -35,19 +57,31 @@
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
};
+ const handleStyle = computed(() => {
+ return handle
+ ? {
+ cursor: isDragging.value ? 'grabbing' : 'grab',
+ }
+ : {};
+ });
+
const style = computed(
() =>
({
position: 'absolute',
transform: `translate(${offset.value.x}px, ${offset.value.y}px)`,
- cursor: isDragging.value ? 'grabbing' : 'grab',
+ ...(handle
+ ? {}
+ : {
+ cursor: isDragging.value ? 'grabbing' : 'grab',
+ }),
} as any)
);
-
return {
isDragging,
startDrag,
style,
+ handleStyle,
};
};
--
Gitblit v1.9.3