Vue 从按钮关闭模态

Question

我正在使用 bootstrap-vue 作为模态。当我单击按钮 OPEN MODAL 时，它会打开包含页脚按钮 OK 和 CANCEL 的模式。这些按钮关闭模式，因为它的预定义代码来自 bootstrap-vue。

我试图在名为 CLOSE MODAL USING THIS BUTTON 的模态中添加按钮，它应该关闭模态，但它没有。有没有办法让 CLOSE MODAL USING THIS BUTTON 从模态中关闭？

查看

<div id="app">
  <b-button v-b-modal.modal-scrollable variant="info" v-on:click="opensModal">Open Modal</b-button>

  <b-modal id="modal-scrollable" scrollable title="Waiver Legal" v-show="!displayModal">
    <p class="my-4">
      "Contains modal detail"
    </p>

      <b-button variant="info" data-dismiss="modal-scrollable" v-on:click="closeModal">CLOSE USING THIS BUTTON</b-button>
      <br>

    </b-modal>
</div>

脚本

new Vue({
  el: "#app",
  data: {
    clickOnButton: true,
    displayModal: true
  },
  methods: {
    opensModal(){
     this.clickOnButton = false; <!-- it opens the modal -->
    },
    closeModal(){
        this.displayModal = false; <!-- it does not close -->
    }
  }
})

下面是 JSFIDDLE

上面的 link 代码

https://jsfiddle.net/ujjumaki/z1ndL65r/18/

Answer 1

您可以使用 bootstrap-vue 提供的内置 this.$bvModal.hide(id)。

所以不是...

<b-button variant="info" data-dismiss="modal-scrollable" v-on:click="closeModal">CLOSE USING THIS BUTTON</b-button>

改为这样做...

<b-button variant="info" @click="$bvModal.hide('modal-scrollable')">CLOSE USING THIS BUTTON</b-button>

这样，您就不需要额外的 close modal 方法。

编辑

实际上您不需要整个 method 块。也可以把数据项拿出来

你的代码应该可以正常工作...

<div id="app">
  <b-button v-b-modal.modal-scrollable variant="info" >Open this Modal</b-button>

  <b-modal id="modal-scrollable" scrollable title="Waiver Legal" v-show="!displayModal">
    <p class="my-4">
      "Contains modal detail"
    </p>

      <b-button variant="info" @click="$bvModal.hide('modal-scrollable')">CLOSE USING THIS BUTTON</b-button>
      <br>

    </b-modal>
</div>

脚本...

new Vue({
  el: "#app"
})

是不是清爽多了？ ;D

Answer 2

Insted 我使用了另一种解决方案 v-model 属性用于显示和隐藏模态的 b-modal。

<div id="app">
  <b-button @click="openModal()" variant="info" >Open this Modal</b-button>

  <b-modal id="modal-scrollable" scrollable title="Waiver Legal" v-modal="popUp">
    <p class="my-4">
      "Contains modal detail"
    </p>

      <b-button variant="info" @click="closeModal()">CLOSE USING THIS BUTTON</b-button>
      <br>

    </b-modal>
</div>

...并在脚本内部创建方法

openModal(){
  this.popUp = true;
}

closeModal(){
  this.popUp = false;
}

Answer 3

这里我给出一个简单的解决方案javascript。我使用了 Vue js，我不想将 jQuery 与 Vue 一起使用。

document.querySelector('#modalid').classList.remove('show');
document.querySelector('body').classList.remove('modal-open');
const mdbackdrop = document.querySelector('.modal-backdrop');
if (mdbackdrop){
   mdbackdrop.classList.remove('modal-backdrop', 'show');
 }

Vue 从按钮关闭模态

Vue close modal from a button

twitter-bootstrap

vue.js

bootstrap-vue