Bootstrap-vue bvModal msgBox - 防止点击关闭答案

【问题标题】：Bootstrap-vue bvModal msgBox - prevent closing on clickBootstrap-vue bvModal msgBox - 防止点击关闭
【发布时间】：2019-10-22 17:20:21
【问题描述】：

我正在使用 bootstrap-vue 的模式来打开/关闭我的应用程序上的项目。

有一些事情可能会出错，例如其他人已经在后台对该项目执行了冲突操作。因此，我想阻止模式关闭，将按钮替换为加载旋转，并在 axios 调用失败时显示一些验证消息。

我有微调器、验证消息等在其他地方工作，所以我不需要帮助，但是我正在努力寻找一种在使用 msgBox 时访问 bvModalEvt 的方法，以调用 .preventDefault() on，根据文档 (https://bootstrap-vue.js.org/docs/components/modal/#prevent-closing)。

我已经在 promise 中的 this 关键字上尝试过（例如 this.preventDefault() 和其他一些东西，例如 this.$bvModal.bvModalEvt （我没想到这会起作用，但我越来越绝望！））。当在下面我的代码中的占位符处调用时，所有这些都会导致 msgBox catch 块被触发，并且模式无论如何都会关闭。

这是我的方法的基本内容：

openClose: function() {

    var self = this;

    this.$bvModal.msgBoxConfirm('Are you sure you want to ' + this.closeVerb + ' this item?', {
            title: 'Confirmation',
            size: 'md',
            cancelVariant: 'gray',
            okTitle: 'Confirm',
            cancelTitle: 'Dismiss',
            hideHeaderClose: false,
            centered: true
        })
        .then(function(value){                       

            // Prevent closing here

            if (value === true) {

                axios.post(postUrl, {
                        'action': self.closeVerb,
                    })
                    .then(function(response) {
                        // Handle here.
                    })
                    .catch(error => {
                        // Catch validation errors here.
                    })
            }
        })
        .catch(error => {
        })
}

非常感谢任何帮助！

【问题讨论】：

标签： javascript vue.js vuejs2 bootstrap-vue

【解决方案1】：

我修复了下面给出的相同问题。

我们可以通过将文档中的 bootstrap-vue 属性转换为小驼峰式来使用它。然后你可以防止模态关闭。

this.$bvModal.msgBoxConfirm("Message",
        {
           noCloseOnBackdrop: true,
           noCloseOnEsc: true
         })

您可以使用此链接https://bootstrap-vue.js.org/docs/components/modal/#modals查看文档中的属性

【讨论】：

【解决方案2】：

在您链接的同一文档中，它说您可以收听这样的事件：

export default {
  mounted() {
    this.$root.$on('bv::modal::show', (bvEvent, modalId) => {
      console.log('Modal is about to be shown', bvEvent, modalId)
    })
  }
}

此外，您还可以收听几个事件。

【讨论】：

您好泰迪，感谢您的回答。如果我使用此方法在事件上调用 .preventDefault() ，除非我实施了一些解决方法，否则我不会阻止关闭所有模式（例如，检查数据项是否为真，仅在 axios 调用之前设置为真） ?在此期间我会尝试一下，但我认为如果我不使用 msgBox 帮助器，它们会是一种更简洁的方式。
是的。它可能并不完美。此外，还有一些模态 ID-也许可以帮助决定取消它。
啊，是的，我应该说这个ID的所有模态。我会告诉你我的进展情况，谢谢。
不幸的是，在收听 bv::modal::hide 并在事件上调用 .preventDefault() 时确实会阻止关闭，它还会阻止在 msgBox 上执行 then()。我可以尝试“ok”，但我似乎无法完成该事件 - 我已经尝试过 this.$root.$on('ok', ...), this.$on(.. .) 和 this.bvModal.$on(...) - 最新的在控制台中引发错误。关于我应该如何听“好”的任何想法？

【解决方案3】：

将验证逻辑与 msgBox 逻辑分开可能会更好。

当确认 msgBox 返回结果时，打开你的“spinner”并做你的 axios 帖子，如果失败，打开一个新的 msgBox 来解释情况。

消息框内容不是反应式的（因此您不能动态更新它的内容）

【讨论】：