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

Question

在我的项目中，我使用的是 bootstrap-vue 模式。现在我需要在用户关闭模式时添加验证。应该有个确认问题，"Are you sure you want to close without saving?"

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

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

How to add backdrop / esc/ headerclose triggers on bootstrap-vue modal?

vue.js

bootstrap-vue