Question

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

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

我有微调器，验证消息等在其他地方工作，因此我不需要帮助，但是我正在努力寻找一种使用msgBox来访问bvModalEvt的方法，以调用.preventDefault（），根据文档（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 => {
        })
}

任何帮助，不胜感激！

Answer 1

我解决了以下相同的问题。

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

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

您可以使用此链接https://bootstrap-vue.js.org/docs/components/modal/#modals

查看文档中的属性

Answer 2

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

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

而且，您可以收听几个事件。

Answer 3

最好将验证逻辑与msgBox逻辑分开。

当确认msgBox返回结果时，请打开“旋转器”并进行axios发布，如果失败，请打开一个新的msgBox来说明情况。

消息框的内容不是被动的（因此您不能动态更新其内容）

Bootstrap-vue bvModal msgBox-防止点击时关闭

3 个答案: