如何在 Bootstrap Vue <b-modal> X-关闭按钮上调用一些方法

Question

使用 b-modal Bootstrap Vue 组件，我试图在用户单击 [=27= 时调用特定方法] 按钮 位于模态 window.

的右上角

我试过 @close, @closeHeader, @closeheader 没有成功.

<b-modal ok-only @ok="methodOk" @close="methodClose">
    <span>Window closed</span>
</b-modal>

Answer 1

@close 活动就是您所追求的。

如果它不适合你，我建议你检查你的 BootstrapVue 版本，或者你的控制台中的潜在错误。

new Vue({
  el: '#app',
  methods: {
    onClose() {
      alert('Modal X button pressed');
    }
  }
})

<link href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-btn v-b-modal.my-modal>Open Modal</b-btn>
  <b-modal id="my-modal" @close="onClose">
    Click the `X` top right to see an alert.
  </b-modal>
</div>

如何在 Bootstrap Vue <b-modal> X-关闭按钮上调用一些方法

How to invoke some method on Bootstrap Vue <b-modal> X-close button

bootstrap-modal

vue.js