设备显示/隐藏，聚焦到设备

wujingjing

2025-01-17 67d49e1d4c6b0519803982f8028253afa9552d0f

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import { computed, ref } from 'vue';
 
export type UseDragOptions = {
    target: HTMLElement;
    onDrag: (e: MouseEvent) => void;
    onDragEnd: (e: MouseEvent) => void;
};
export const useDrag = () => {
 
    const isDragging = ref(false);
    const startPos = ref({ x: 0, y: 0 });
    const offset = ref({ x: 0, y: 0 });
    const startDrag = (e: MouseEvent) => {
        isDragging.value = true;
        startPos.value = {
            x: e.clientX - offset.value.x,
            y: e.clientY - offset.value.y,
        };
 
        const handleMouseMove = (e: MouseEvent) => {
            if (!isDragging.value) return;
 
            offset.value = {
                x: e.clientX - startPos.value.x,
                y: e.clientY - startPos.value.y,
            };
        };
 
        const handleMouseUp = () => {
            isDragging.value = false;
            document.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mouseup', handleMouseUp);
        };
 
        document.addEventListener('mousemove', handleMouseMove);
        document.addEventListener('mouseup', handleMouseUp);
    };
    const style = computed(
        () =>
            ({
                position: 'absolute',
                transform: `translate(${offset.value.x}px, ${offset.value.y}px)`,
                cursor: isDragging.value ? 'grabbing' : 'grab',
            } as any)
    );
    
 
    return {
        isDragging,
        startDrag,
        style,
    };
};