Bootstrap-vue 从模态打开模态答案

【问题标题】：Bootstrap-vue open modal from modalBootstrap-vue 从模态打开模态
【发布时间】：2019-03-17 02:20:10
【问题描述】：

有没有办法在 bootstrap-vue 中从另一个 modal 打开一个新的 modal？

<div>
  <b-btn v-b-modal.modal1>Launch demo modal</b-btn>
  <b-modal id="modal1" title="Bootstrap-Vue">
    <b-btn v-b-modal.modal2>Launch another modal</b-btn>
    <b-modal id="modal2" title="Bootstrap-Vue">
      Vueception
    </b-modal>
  </b-modal>
</div>

当我在https://bootstrap-vue.js.org/play 上运行此示例时，它将打开第一个模式，但当我单击按钮打开第二个模式时，它将导致第一个模式关闭。

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

你只需要重新排列你的组件，使按钮在第一个模态中，但第二个模态应该在外面，这样它就不会被第一个模态关闭..

<div>
  <b-btn v-b-modal.modal1>Launch demo modal</b-btn>
  <b-modal id="modal1" title="Bootstrap-Vue">
    <b-btn v-b-modal.modal2>Launch another modal</b-btn>
  </b-modal>
  <b-modal id="modal2" title="Bootstrap-Vue">
    Vueception
  </b-modal>
</div>

查看working example

【讨论】：

@boussadjrabrahim 是的，我们一定一直在尝试同时解决它。最初我考虑使用PortalVue，但似乎解决方案要简单得多。感谢您的 +1 :)
它可以工作，但它仍然关闭父模式。我想我需要更像嵌套模态在reactstrap 中的工作方式。
升级到最新版本的BootstrapVue，增加了多模态支持。官方 Bootstrap v4.x 不支持多打开模式，但是 BootstrapVue 已经添加了对它的自定义支持。也不要将b-modal 放在另一个b-modal 中。这会导致问题。
我正在这样做，除了 modal1 有一个启动 modal2 的指令，而 modal2 有一个启动 model1 的指令。两种 b 模态都具有无堆叠选项，因此我试图实现的效果是两者之间的切换。会发生什么：modal1 可以转到 modal2，而 modal2 可以转到 modal1，但是对于任何一种情况，一旦在第二步，指令就不再做任何事情来多次更改模态。所以你只能切换一次。对此有什么想法吗？
更新我上面的评论：问题出在指令上。如果不使用指令，而是定义单击事件来打开另一个模式，它会按预期工作，例如 @click="$root.$emit('bv::show::modal', id + '_subscribe', $ event.target)"