如何在bootstrap-vue模态上添加background / esc / headerclose触发器？

Question

在我的项目中，我正在使用bootstrap-vue模态。现在，我需要为用户关闭模式时添加验证。应该有一个确认问题，“您确定要关闭而不保存吗？”

ok和cancel按钮触发器可以很好地工作，但是当我使用 esc 键并单击背景按钮尝试相同时，它们都不起作用。我在文档中看到可以使用它们https://bootstrap-vue.js.org/docs/components/modal/

HTML：

<div id="app">
  <b-btn v-b-modal.modal1>Launch demo modal</b-btn>
  <b-modal id="modal1" title="Bootstrap-Vue" @headerclose="confirmBeforeHide"
    @esc="confirmBeforeHide">
    <p class="my-4">QQ</p>
  </b-modal>
</div>

JS：

new Vue({
  el: '#app',
  methods: {
    confirmBeforeHide(e) {
        alert('hi')
    }
  },
})

CSS：

#app {
  padding: 20px;
  height: 450px;
}

这是我的jsfiddle

Answer 1

esc / headerclose / backdrop的位置有@hide