从一个按钮关闭模式

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

https:/jsfiddle.netujjumakiz1ndL65r18。

Answer 1

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

所以，与其这样...

<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"
})

这样是不是干净多了？

Answer 2

你只需要 displayModal 在 data:

<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-if="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: {
    displayModal: true
  },
  methods: {
    opensModal(){
     this.displayModal = true; /** it opens the modal **/
    },
    closeModal(){
        this.displayModal = false; /** it does not close **/
    }
  }
})