嵌套弹窗center位置时会限定父弹窗内以及tabbar组件遮挡问题

[nadirvishun]

Wot Design Uni 版本号

1.7.0

平台

h5, 微信小程序

复现Demo地址（如不提供，将被直接关闭）

wot-demo

重现步骤

1、嵌套弹窗，一个wd-popup内再增加wd-select-picker弹窗，当wd-popup的position为center时，wd-select-picker弹窗会被固定在wd-popup父弹窗范围内，而其它position则不会，如图：

• center:
  
• top:
  
• bottom:
  
  2、遮挡tabbar，通过上面的图片（自定义tabbar）也能看到，弹窗1和2都会被自定义tabbar遮挡，而原生的则只有wd-popup被遮挡，而wd-select-picker不会被遮挡，下面时原生tabbar的情况：
  

期望的结果是什么？

1、嵌套弹窗当为center时，子弹窗也能全局弹出。
2、tabbar不遮挡弹窗或是提高弹窗位置以tabbar上限为准。

实际的结果是什么？

1、嵌套弹窗当为center时，子弹窗被框限在父弹窗内。
2、原生tabbar时会遮挡wd-popup而不会遮挡wd-select-picker（向上提高了而不一定是不遮挡）
3、自定义tabbar是两个弹窗都会遮挡。

环境信息

开发平台：微信小程序、H5平台
操作系统：h5：win11 edge最新；小程序：安卓
uni-app版本：最新3.0.0-4040520250104002或是create-uni模板中的3.0.0-4020420240722002

其他补充信息

No response

[Moonofweisheng]

问题1的产生是由于popup使用了transform从而使子组件的position:fixed失效了，参见position，在popup中使用具有弹出能力的组件时，需要将其放在popup外部，调用其open方法实现弹出。

[nadirvishun]

@Moonofweisheng 但是wd-select-picker这个组件展示视图和弹窗视图是一体的，怎么能实现放到popup外部呢？照着这个组件源码，自己再分开重写下？

[Moonofweisheng]

可以在popup中使用cell组件，将select-picker放在外部。cell的click调用picker的open方法。

…

---原始邮件--- 发件人: ***@***.***> 发送时间: 2025年2月20日(周四) 上午9:51 收件人: ***@***.***>; 抄送: ***@***.******@***.***>; 主题: Re: [Moonofweisheng/wot-design-uni] 嵌套弹窗center位置时会限定父弹窗内以及tabbar组件遮挡问题 (Issue #900) @Moonofweisheng 但是wd-select-picker这个组件展示视图和弹窗视图是一体的，怎么能实现放到popup外部呢？照着这个组件源码，自己再分开重写下？ — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***> nadirvishun left a comment (Moonofweisheng/wot-design-uni#900) @Moonofweisheng 但是wd-select-picker这个组件展示视图和弹窗视图是一体的，怎么能实现放到popup外部呢？照着这个组件源码，自己再分开重写下？ — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[nadirvishun]

@Moonofweisheng 明白了，到时候测试下，还有就是遮挡tabbar这个目前有好的解决方法吗？

[Moonofweisheng]

@Moonofweisheng 明白了，到时候测试下，还有就是遮挡tabbar这个目前有好的解决方法吗？

可以通过css变量--window-bottom，设置具体底部的padding。

[nadirvishun]

我总结下吧：
1、嵌套弹窗问题，可以在弹窗1内部用cell替代（缺点是无法展示placeholder，要自行处理），弹窗2<wd-select-picker xxx use-default-slot></wd-select-picker>放到弹窗1外部，通过use-default-slot来隐藏，测试过其它visibility: hidden; opacity: 0等都会导致弹窗2不显示，然后通过ref来调用open方法弹窗。
2、层级问题：

• 首先是为什么原生tabbar状态下弹窗2有上移，而弹窗1没有上移，是因为wd-action-sheet有配置style样式：margin-bottom: var(--window-bottom);，所以参照此方，弹窗1的内容用<view class="mb-[var(--window-bottom)]">来包裹，同样来使弹窗1上移。
• 然后时为什么自定义tabbar状态下，两个弹窗都被遮挡，是因为wot-demo的pages.json下配置的tabbar的height为0导致的，修改为50，就和原生的表现一样了

  "tabBar": {
    "custom": true,
    "height": "0", //这里修改
    ...
  }
  

• 最后另外的解决方法，直接设置两个弹窗的层级z-index为1000和1001，高于原生或自定义tabbar的层级，覆盖tabbar也是一种方法（但是wd-select-picker包含的wd-action-sheet组件样式目前没有参数修改，导致wd-select-picker在原生情况下会一直有上移，可能需要额外处理）

以上只在h5中测试，小程序没有测试。
详细解决方法可以参考上方示例demo中的fix分支