<Modal
v-model="modalVisible"
:loading="modalLoading"
@on-ok="onModalOk"
@on-cancel="modalVisible = false"
>
</Modal>
onModalOk() {
if (this.modalType === '模式一') {
this.modalLoading = true // 确保弹出confirm时modal不消失
this.$Modal.confirm({
title: 'Confirm',
content: '<p>Are you sure to submit change?</p>',
onOk: () => {
this.modalVisible = false // 若点击confirm的确定,modal消失
this.submitEditFunction()
},
onCancel: () => {
this.modalLoading = false // 若点击confirm的取消
this.$nextTick(() => {
this.modalLoading = true // modal不消失,且不出现loading小菊花
})
}
})
} else if (this.modalType === '模式二') {
if (/*没通过某些校验*/) { // modal不消失,且不出现loading小菊花
this.modalLoading = false
this.$nextTick(() => {
this.modalLoading = true
})
return
}
this.modalVisible = false
this.submitAddFunction()
}
}
总结:
分别写了两种情况,一个是结合confirm框的,一个是立即校验的。两者没有逻辑联系,写两种就是为了对比,说明重点是以下代码。详细的原因的略,应该不难理解。
this.modalLoading = false
this.$nextTick(() => {
this.modalLoading = true
)