博客

在iview的modal中，弹出的对话框在点击确定按钮后会立刻关闭当前的对话框，在正常使用这一逻辑是没有问题的，但是如果modal中包括表单验证，或者其他需要自定义关闭当前对话框的操作时就会变得捉襟见肘。因此，实现对话框的异步关闭是必须要实现的。

然而通过对iview官方文档的阅读，modal中提供的实现异步关闭的loading属性在使用后虽然对话框仍然处于显示状态，但确定按钮始终处于加载状态，但已经影响到业务逻辑。

官方给出的解决办法如下

<template>
    <div>
        <Button type="primary" @click="modal1 = true">显示对话框</Button>
        <Modal
            v-model="modal1"
            title="普通的Modal对话框标题"
            @on-ok="ok"
            :loading="loading">
            <p>对话框内容</p>
            <p>对话框内容</p>
            <p>对话框内容</p>
        </Modal>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                modal1: false,
                loading: true
            }
        },
        methods: {
            ok () {
                this.$Message.info('异步验证数据');
                setTimeout(() => {
                    this.loading = false;
                    this.$nextTick(() => {
                        this.loading = true;
                    });
                }, 2000);
            }
        }
    }
</script>

详见链接

https://github.com/iview/iview/issues/597#issuecomment-292422473


结合iview的表单验证以及业务逻辑，大致修改如下

html内容

<!--驳回申请模态-->
    <Modal v-model="isRefuse" title="请输入驳回理由" width="560px" @on-ok="patRefuse" :loading="refuseLoading">
      <Form :rules="rules" :model="refuse" ref="refuse">
        <FormItem prop="refuseMsg">
          <Input type="textarea" v-model="refuse.refuseMsg" style="height: 100px;"></Input>
        </FormItem>
      </Form>
    </Modal>

data（） {
   return {
        isRefuse: false,// 驳回申请模态
        refuseLoading: true,
        refuse: {
          refuseMsg: '',// 驳回理由
        },
        rules: {
          refuseMsg: [{required: true, message: '请输入驳回理由', trigger: 'blur'}]
        }
   }
},
methods:{
     //  拒绝
      patRefuse() {
        this.$refs.refuse.validate((valid) => {// 表单验证
          if (valid) {
            pat.patRefuse(this.refuse).then(res => {
              this.$Message.success(res.msg);
              this.refuseLoading = false;// 关闭加载状态
              this.isRefuse = false;// 关闭当前模态
            }).catch(() => {
              this.isRefuse = false;
              this.refuseLoading = false;
            });
            this.refuseLoading = false;
            this.isRefuse = false;
          } else {
              // 划重点 $nextTick 在下次 DOM 更新循环结束之后执行延迟回调...
            setTimeout(() => {
              this.refuseLoading = false;
              this.$nextTick(() => {
                this.refuseLoading = true;
              });
            }, 1000);
          }
        });
      }
}