Bootstrap-Vue开放模式

时间:2018-10-11 22:07:09

标签: vue.js bootstrap-vue

是否有办法从bootstrap-vue中的另一个模态中打开一个新模态?

<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上运行此示例时,它将打开第一个模态,但是当我单击按钮以打开第二个模态时,它将导致第一个模态关闭。

1 个答案:

答案 0 :(得分:3)

您只需要重新排列组件的顺序,以使按钮位于第一个模态内部,而第二个模态应位于外部,以便不会被第一个模态关闭。.

<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