fix: 优化右键菜单位置计算逻辑,确保菜单在窗口内显示,提升用户体验
This commit is contained in:
parent
a46c170fbb
commit
2ac24349a8
@ -80,11 +80,42 @@ const {
|
||||
watch(
|
||||
() => props.visible,
|
||||
(isVisible) => {
|
||||
if (isVisible) {
|
||||
positionX.value = props.x;
|
||||
positionY.value = props.y;
|
||||
if (isVisible && menuRef.value) {
|
||||
// 获取浏览器窗口尺寸
|
||||
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