Fix: v-overflow-tooltip 增加边界检测

Lruihao · Jun 6, 2024 · d0a22cd · d0a22cd
1 parent 3dac513
commit d0a22cd
Showing 1 changed file with 21 additions and 2 deletions.
diff --git a/src/directives/overflow-tooltip.js b/src/directives/overflow-tooltip.js
@@ -38,8 +38,27 @@ const setTooltip = (el, binding) => {
   el.onmousemove = function(e) {
     if (!isEllipsis) { return }
     const vcTooltipDom = document.getElementById('vc-tooltip')
-    vcTooltipDom.style.top = e.clientY + 15 + 'px'
-    vcTooltipDom.style.left = e.clientX + 15 + 'px'
+    const padding = 5
+    let offsetX = e.clientX + 15
+    let offsetY = e.clientY + 15
+    // 判断是否超出视窗边界（横向）
+    if (e.clientX + vcTooltipDom.offsetWidth > document.documentElement.clientWidth) {
+      offsetX = document.documentElement.clientWidth - vcTooltipDom.offsetWidth - padding
+    }
+    if (document.documentElement.clientWidth - vcTooltipDom.offsetWidth <= 0) {
+      offsetX = padding
+      vcTooltipDom.style.width = document.documentElement.clientWidth - padding * 2 + 'px'
+    }
+    // 判断是否超出视窗边界（纵向）
+    if (e.clientY + vcTooltipDom.offsetHeight > document.documentElement.clientHeight) {
+      offsetY = document.documentElement.clientHeight - vcTooltipDom.offsetHeight - padding
+    }
+    if (document.documentElement.clientHeight - vcTooltipDom.offsetHeight <= 0) {
+      offsetY = padding
+      vcTooltipDom.style.height = document.documentElement.clientHeight - padding * 2 + 'px'
+    }
+    vcTooltipDom.style.left = offsetX + 'px'
+    vcTooltipDom.style.top = offsetY + 'px'
   }
   // 鼠标移出时将浮层元素销毁
   el.onmouseleave = function() {