vue3+ts：和 gpt4 一起封装完美的悬浮球组件，做了特别多的优化_vue3悬浮球

直接上组件代码，该组件代码接受一个事件参数，当点击该悬浮球就会触发事件

简单说说过程要解决的许多问题：

1. 计算位置，性能优化
2. 适配移动 pc
3. 到处拖动导致页面文字选中问题
4. 可以直接拖动到屏幕外问题
5. 无法展示问题（加个 z-index:100）
6. 当你移动悬浮球也会触发事件（需要改成只有点击才触发事件，点击拖动不触发事件）

主要好像就这些，上代码：

<!--
一个很完善的悬浮球组件，接受一个事件参数，当点击该悬浮球就会触发事件
简单说说过程要解决的许多问题：
 1. 计算位置，性能优化
 2. 适配移动 pc
 3. 到处拖动导致页面文字选中问题
 4. 可以直接拖动到屏幕外问题
 5. 无法展示问题（加个 z-index:100）
 6. 当你移动悬浮球也会触发事件（需要改成只有点击才触发事件，点击拖动不触发事件）
-->
<template>
  <div
      :style="{ right: `${right}px`, bottom: `${bottom}px` }"
      class="floating-ball"
      @click="handleClick"
      @mousedown="startDrag"
      @touchstart="startTouchDrag">
    菜单
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';

const props = defineProps({
  onClick: Function
});

const ballSize = 50;
const right = ref(10); // 初始距右边距离
const bottom = ref(10); // 初始距底部距离
const isDragging = ref(false);
let startX, startY, offsetX, offsetY, moved;

const startDrag = (event) => {
  disableTextSelection();
  isDragging.value = true;
  startX = event.clientX;
  startY = event.clientY;
  // 根据悬浮球的当前位置重新计算 offsetX 和 offsetY
  offsetX = (window.innerWidth - right.value - 25) - startX;
  offsetY = (window.innerHeight - bottom.value - 30) - startY;
  moved = false;

  window.addEventListener('mousemove', onMouseMove);
  window.addEventListener('mouseup', stopDrag);
};

const startTouchDrag = (event) => {
  disableTextSelection();
  event.preventDefault();
  const touch = event.touches[0];
  isDragging.value = true;
  startX = touch.clientX;
  startY = touch.clientY;
  // 同样重新计算 offsetX 和 offsetY
  offsetX = (window.innerWidth - right.value - 30) - startX;
  offsetY = (window.innerHeight - bottom.value - 20) - startY;
  moved = false;

  window.addEventListener('touchmove', onTouchMove, { passive: false });
  window.addEventListener('touchend', stopTouchDrag);
};


let animationFrameId = null;

const onMouseMove = (event) => {
  if (!isDragging.value) return;
  if (animationFrameId) cancelAnimationFrame(animationFrameId);

  animationFrameId = requestAnimationFrame(() => {
    updatePosition(event.clientX, event.clientY);
  });
};

const onTouchMove = (event) => {
  event.preventDefault();
  if (!isDragging.value) return;
  const touch = event.touches[0];

  if (animationFrameId) cancelAnimationFrame(animationFrameId);

  animationFrameId = requestAnimationFrame(() => {
    updatePosition(touch.clientX, touch.clientY);
  });
};

const updatePosition = (x, y) => {
  moved = true;
  const halfBallSize = ballSize / 2;
  right.value = Math.max(-halfBallSize, Math.min(window.innerWidth - x - offsetX - halfBallSize, window.innerWidth - halfBallSize));
  bottom.value = Math.max(-halfBallSize, Math.min(window.innerHeight - y - offsetY - halfBallSize, window.innerHeight - halfBallSize));
};



const stopDrag = () => {
  enableTextSelection();
  isDragging.value = false;
  window.removeEventListener('mousemove', onMouseMove);
  window.removeEventListener('mouseup', stopDrag);

  if (!moved && props.onClick) {
    props.onClick();
  }
};

const stopTouchDrag = () => {
  enableTextSelection();
  isDragging.value = false;
  window.removeEventListener('touchmove', onTouchMove);
  window.removeEventListener('touchend', stopTouchDrag);

  if (!moved && props.onClick) {
    props.onClick();
  }
};

function disableTextSelection() {
  document.body.style.userSelect = 'none';
  document.body.style.webkitUserSelect = 'none';  // 针对 Safari 浏览器
  document.body.style.msUserSelect = 'none';      // 针对 IE 浏览器
  document.body.style.mozUserSelect = 'none';     // 针对 Firefox 浏览器
}

function enableTextSelection() {
  document.body.style.userSelect = '';
  document.body.style.webkitUserSelect = '';
  document.body.style.msUserSelect = '';
  document.body.style.mozUserSelect = '';
}

const handleClick = () => {
  // 处理点击逻辑
};
</script>

<style scoped>
.floating-ball {
  width: 50px;
  height: 50px;
  background-color: white; /* 白色背景 */
  border-radius: 50%;
  position: absolute;
  cursor: grab;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 100;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* 黑色阴影 */
  @apply flex justify-center items-center;
}

.floating-ball:active {
  cursor: grabbing;
}

.floating-ball:hover {
  background-color: #f8f8f8; /* 悬停时的背景色 */
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.3); /* 悬停时的阴影 */
}
</style>

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

父组件调用：

 <FloatingBall :onClick="事件"/>
1

就这么简单，嘻嘻

https://shushiai.com/