baidu / amis

前端低代码框架,通过 JSON 配置就能生成各种页面。
https://baidu.github.io/amis/
Apache License 2.0
17.18k stars 2.49k forks source link

页面嵌套了多个编辑器制作的表单,最上层的表单的所有弹层无法触发 #10494

Open zhuxiaolu0903 opened 3 months ago

zhuxiaolu0903 commented 3 months ago

描述问题:

请用一段清晰简洁的文字描述问题是什么... 页面嵌套了多个编辑器制作的表单,最上层的表单的所有弹层无法触发

截图或视频:

可以的话,尽可能提供截图或视频来补充描述你的问题... image

如何复现(请务必完整填写下面内容):

  1. 你是如何使用 amis 的? sdknpm其他... vue项目中引入SDK,然后再用可视化编辑器制作页面,vue项目中拿到schema渲染

  2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在 sdk版本v6.0.0

  3. 粘贴有问题的完整 amis schema 代码: code here...

  4. 操作步骤 首先在页面中嵌入表单A 新增弹窗,弹窗中嵌入表单B 点击表单B中的下拉框,下拉框无法显示

  5. 已定位问题 发现amis-ui中使用了react-overlays/Portal组件,传给Portal组件的container是获取表单A的,正常情况下应该是表单B,而不是表单A

lkg028 commented 3 months ago

// 用来配置弹窗等组件的挂载位置 // getModalContainer: () => document.getElementsByTagName('body')[0],

  <div
    ref="el"
  ></div>

  amis.embed(
    el.value,
    JSON.parse(JSON.stringify(schema)),
    {},
    {
      theme: 'antd',
      ...config,
      getModalContainer: () => {
        return el.value
      }
    }
  )