Skip to content
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.

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

【需求】当 v-context-menu 的 overflow 属性为 scroll 时,sub-menu 是否可能使用 transform 来定位而不是相对定位来展示? #113

Open
Liubasara opened this issue Dec 29, 2021 · 1 comment

Comments

@Liubasara
Copy link

Liubasara commented Dec 29, 2021

期望结果

希望在 context-menu 的 overflow 为 scroll 的情况下 sub-menu 中的 sub-item 能够正常显示

实际结果

长菜单时会遇到要把 context-menu 的 overflow-y 置为 scroll 的情况,可是 w3c 标准下不允许出现 overflow-y: scroll 时 overflow-x: visible 的情况。这种情况下 sub-menu 里的子菜单再使用相对定位会出现遮挡情况

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.

复现步骤

codepen 复现链接:
https://codepen.io/liubasara/pen/PoJQZjN

mmexport1640770660389

环境说明

  • 组件版本: 2.9.0
  • Vue 版本:2.6.12
  • 操作系统及版本:win10
  • 浏览器及版本:chrome
@Liubasara
Copy link
Author

Liubasara commented Feb 13, 2022

通过 Fork 该仓库我写了一个能兼容上述情况的组件 @custom-lb-ui/v-contextmenu-transform,添加了一个新组件 v-contextmenu-submenu-transform,可以供有需要的参考。

可以看下面这个在线 demo

https://codesandbox.io/s/contextmenusubmenutransformdemo-g5h2c

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant