Skip to content

Commit

Permalink
Fix: v-overflow-tooltip 增加边界检测
Browse files Browse the repository at this point in the history
  • Loading branch information
Lruihao committed Jun 6, 2024
1 parent 3dac513 commit 8c3806a
Showing 1 changed file with 22 additions and 2 deletions.
24 changes: 22 additions & 2 deletions src/directives/overflow-tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,28 @@ 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'
}
console.log(offsetX, e.clientX, vcTooltipDom.offsetWidth)

Check warning on line 60 in src/directives/overflow-tooltip.js

View workflow job for this annotation

GitHub Actions / build

Unexpected console statement
vcTooltipDom.style.left = offsetX + 'px'
vcTooltipDom.style.top = offsetY + 'px'
}
// 鼠标移出时将浮层元素销毁
el.onmouseleave = function() {
Expand Down

0 comments on commit 8c3806a

Please sign in to comment.