Css 如何将模态放置在b下拉菜单下的子组件中，而不在b下拉菜单中进行渲染？

我正在制作一个子按钮组件，它将打开同一组件中包含的模式。现在，由于模态嵌套在（子组件的）根元素中，因此它在父组件的b下拉列表（引导Vue）中呈现。我的目标是让模态保持在子组件中，但是在窗口中间渲染，就像所有其他模态一样。

下面是来自我的父组件（使用Pug）的调用：

下面是来自

ExportItemsToPDF

组件的部分：

.export_items_to_pdf
  b-dropdown-item(@click.prevent='openModal()') {{buttonTitle}}
  modal(name='export_items_to_pdf' height='auto' width='70%')
    form.modal-container(@submit.prevent='submit')
      h1 TEST

如果有任何其他支持信息需要，请让我知道，我会提供

---

谢谢。

如果没有任何自定义Javascript来操作模式，我认为您无法做到这一点。如果您试图从共享组件中获益，您可以将其放入其他组件中（以保持代码干燥等），则必须将模式拆分为自己的组件，然后在父组件中执行以下操作

ExportItemsToPDFModal
b-dropdown(right text='Reports')
  ExportItemsToPDFDropdownItem(:item_ids=`selectedItems`)

---

…因此模态是

b下拉列表的兄弟姐妹（或可能更高，如阿姨/叔叔或阿姨/阿姨/阿姨/阿姨），而不是子元素。
如果使用BootstrapVue
2.x.x
+（不是
2.0.0-rc.xx
版本），则
将导入要附加到body标记的模态标记（除非
静态
道具设置在
上）
ExportItemsToPDFModal
b-dropdown(right text='Reports')
  ExportItemsToPDFDropdownItem(:item_ids=`selectedItems`)