iview结合loading属性手动控制显示隐藏

<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
)
发布了34 篇原创文章 · 获赞 1 · 访问量 7896

猜你喜欢

转载自blog.csdn.net/landiyaaa/article/details/96175466
今日推荐