Skip to content

Fix/3867 adjust menu positon #3984

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 6, 2025
Merged

Fix/3867 adjust menu positon #3984

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2ea7112
fix: solve which problem #3867
z1156727502 May 30, 2025
a753123
Merge pull request #3979 from z1156727502/fix/3867
fangsmile Jun 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 17 additions & 4 deletions packages/vtable/src/components/menu/dom/logic/MenuElement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -572,8 +572,13 @@ export class MenuElement {
const rootElement = this._rootElement;
// const element = table.getElement();
const element = table.internalProps.menu.parentElement ?? table.getElement();
const { width: containerWidth, left: containerLeft, top: containerTop } = element.getBoundingClientRect();
const { x: rootLeft, y: rootTop, width: rootWidth } = rootElement.getBoundingClientRect();
const {
width: containerWidth,
height: containerHeight,
left: containerLeft,
top: containerTop
} = element.getBoundingClientRect();
const { x: rootLeft, y: rootTop, width: rootWidth, height: rootHeight } = rootElement.getBoundingClientRect();

if (secondElement) {
// if (secondElement.parentElement !== rootElement) {
Expand All @@ -589,12 +594,20 @@ export class MenuElement {
secondElement.style.maxWidth = `${maxWidth}px`;
//计算弹出框的宽度
const secondElementWidth = secondElement.clientWidth;
// const secondElementHeight = secondElement.clientHeight;
const secondElementHeight = secondElement.clientHeight;

const secondElementTop = y - 4 - containerTop;
const secondElementLeft = x - containerLeft;

secondElement.style.top = `${secondElementTop}px`;
let topStyle = secondElementTop;
// 判断如果超出下范围则靠上边显示
if (topStyle + secondElementHeight > containerHeight) {
const secondElementItem = secondElement.firstElementChild;
topStyle = topStyle - secondElementHeight + secondElementItem.clientHeight + 4;
}

secondElement.style.top = `${topStyle}px`;

let leftStyle = secondElementLeft;

// 判断如果超出右范围则靠左边显示
Expand Down
Loading