fix: 优化右键菜单位置计算逻辑,确保菜单在窗口内显示,提升用户体验
This commit is contained in:
parent
a46c170fbb
commit
2ac24349a8
@ -80,10 +80,41 @@ const {
|
|||||||
watch(
|
watch(
|
||||||
() => props.visible,
|
() => props.visible,
|
||||||
(isVisible) => {
|
(isVisible) => {
|
||||||
if (isVisible) {
|
if (isVisible && menuRef.value) {
|
||||||
positionX.value = props.x;
|
// 获取浏览器窗口尺寸
|
||||||
positionY.value = props.y;
|
const windowWidth = window.innerWidth;
|
||||||
|
const windowHeight = window.innerHeight;
|
||||||
|
|
||||||
|
// 获取菜单的尺寸
|
||||||
|
const menuWidth = menuRef.value.offsetWidth;
|
||||||
|
const menuHeight = menuRef.value.offsetHeight;
|
||||||
|
|
||||||
|
// 初始位置
|
||||||
|
let newX = props.x;
|
||||||
|
let newY = props.y;
|
||||||
|
|
||||||
|
// 边界检查与调整
|
||||||
|
if (newX + menuWidth > windowWidth) {
|
||||||
|
newX = windowWidth - menuWidth - 5; // 预留5px边距
|
||||||
}
|
}
|
||||||
|
if (newY + menuHeight > windowHeight) {
|
||||||
|
newY = windowHeight - menuHeight - 5; // 预留5px边距
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确保菜单不会出现在左侧或顶部屏幕外
|
||||||
|
if (newX < 0) {
|
||||||
|
newX = 5;
|
||||||
|
}
|
||||||
|
if (newY < 0) {
|
||||||
|
newY = 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
positionX.value = newX;
|
||||||
|
positionY.value = newY;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
flush: 'post', // 确保在DOM更新后执行
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user