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

[Liubasara]

期望结果

希望在 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

环境说明

• 组件版本： 2.9.0
• Vue 版本：2.6.12
• 操作系统及版本：win10
• 浏览器及版本：chrome

[Liubasara]

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

可以看下面这个在线 demo

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