iview爬坑之旅——Modal点击‘确定’按钮时弹框自动关闭问题

最近在做Angular项目到Vue项目重构迁移，之前Angular用的UI框架是NG-ZORRO，Vue现在用的是Iview； 但是当用Iview-modal 做表单或者条件校验时遇到了一个问题，当校验不通过时，点击确定，当校验不通过时，弹框也自动关闭了；

解决方案

方案一 （自用）

利用Modal的slot,自定义写底部按钮，这样就可以避开组件内置的 @On-ok, @on-cancel；在按钮点击事件里面去做数据的验证，通过v-model控制模态框的显示与隐藏。

 <!--解决弹框自动关闭-->
 <div slot="footer">
   <Button type="text" @click="handleOnCancel">取消</Button>
   <Button type="primary" @click="handleConfirmClick">确定</Button>						
 </div>

这种情况需要手动关闭Modal，注意点击右上方关闭按钮，和点击遮罩层关闭之后的情况；

方案二

给Modal添加属性loading后，点击确定按钮后，对话框不会自动消失，会进入等待状态，并显示 loading 状态，需要手动关闭对话框，常用于表单提交；

this.$refs[name].validate(async (valid) => {
   if (valid) {
     this.loading = false 
     let res= await this.fetchGet('***', {})
     if (res == null) {
       this.$Message.error('*****')
       this.loading = true 
     } else { 
       this.model = false
       this.loading = true
     } 
   } else {
     this.$Message.error('表单验证失败!');
    }
})

参考资料

1. Github关于Modal自动关闭的讨论