如何将事件添加到 `this.$bvModal.msgBoxConfirm(...)` 中的确定按钮？

Question

我有一个 bootstrap-vue 项目。我遵循这个 tutorial:

我可以使用确认模式打开一个大图像模式。

      showBigImg(src, id) {
        const h = this.$createElement

        const BigImgVNode = h(
          'div',
          {class: ['foobar']},
          [
            h('b-img', {
              props: {
                src: src,
                fluid: true,
                center: true
              }
            })
          ]
        )

        this.$bvModal.msgBoxConfirm([BigImgVNode], {
          buttonSize: 'sm',
          centered: true,
          size: 'lg',
          okTitle: 'OK', 

        }).then(value => {

        })

      }
    }

但是我有一个问题，我搜索了很多次official docs，我没有找到向确定按钮添加事件的方法。

我也试过：

        this.$bvModal.msgBoxConfirm([BigImgVNode], {
          buttonSize: 'sm',
          centered: true,
          size: 'lg',
          okTitle: 'OK', 
          ok: ()=> {
            console.log("ok button clicked.")
          }
        }).then(value => {

        })

但是不起作用，请告诉我如何通过这种方式将事件添加到 this.$bvModal.msgBoxConfirm(...) 中的确定按钮。

Answer 1

基于文档中的以下段落。您可以使用 Promise 中的 return 值来确定模式是如何关闭的。如果按下 OK 按钮，returned 值将为 true。

Both methods return a Promise which resolve into a value when the modal hides. .msgBoxConfirm() resolves to either true (OK button pressed), false (CANCEL button pressed), or null (if the modal was closed via backdrop click, Esc press, or some other means.

https://bootstrap-vue.org/docs/components/modal#modal-message-boxes (Quote found a slightly under the table in linked section)

async showModal() {
  try {
    const result = await this.$bvModal.msgBoxConfirm(
      "Click the `OK` button to see an alert.",
      {
        title: "Confirmation Box"
      }
    );

    if (result === true) 
      alert("OK button was pressed");
    else if (result === false) 
      alert("CANCEL button was pressed");
    else if (result === null)
      alert("The modal was closed by the user using other means. (ESC, Backdrop, ect..)");
  } catch {
    alert("The modal was destroyed before the user could make a decision");
  }
}

工作示例

new Vue({
  el: "#app",
  methods: {
    async showModal() {
      try {
        const result = await this.$bvModal.msgBoxConfirm(
          "This is a confirmation box", {
            title: "Confirmation Box"
          }
        );

        if (result === true)
          alert("OK button was pressed");
        else if (result === false)
          alert("CANCEL button was pressed");
        else if (result === null)
          alert("The modal was closed by the user using other means. (ESC, Backdrop, ect..)");
      } catch {
        alert("The modal was destroyed before the user could make a decision");
      }
    }
  }
});

<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.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-btn @click="showModal">
    Show Modal
  </b-btn>
</div>

如何将事件添加到 `this.$bvModal.msgBoxConfirm(...)` 中的确定按钮？

How to add event to OK button in `this.$bvModal.msgBoxConfirm(...)`?

javascript

bootstrap-vue

工作示例