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

最新推荐文章于 2023-05-05 14:52:58 发布

landiyaaa

最新推荐文章于 2023-05-05 14:52:58 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/landiyaaa/article/details/96175466

本文探讨了Vue中Modal组件的两种使用场景：一种是结合confirm确认框进行操作确认；另一种是在显示Modal前直接进行数据校验。文章通过具体代码示例详细解释了如何在不同情况下控制Modal的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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
)