iview框架中modal默认按钮点击关闭

问题：
使用了iview框架自定义的modal弹框，去验证表单之后，点击确认按钮之后，弹框自动就关闭了。

一、第一种方法

使用loading的属性进行控制，延迟状态。
同时使用$nextStick() 是指下次Dom更新之后执行回调，更新到最新的实例Dom结构。

//html:
<Modal v-model="editModel" :mask-closable="false" :loading="loading" @on-ok="test()" ref="test"></Modal>

// vue js
//data: 
loading: true
editModel: false
//method
test: function(){
	this.$refs['test'].validate((valid)=>{
		if(valid){
			this.editModel = false;//关闭弹窗
		}else {
			//验证失败 延迟关闭  同时按钮需要可以点击
			//dom更新前  老dom的loading状态已经开启
			this.loading = false;  //取消loading按钮状态
			this.$nextStick(()=>{
				//dom已经验证到更新的Dom
				//此时重新开启loading状态  等待验证
				this.loading = true;
			})
		}
	})
}

二、第二种方法

使用插槽

//html:
<Modal v-model="editModel" :mask-closable="false" :loading="loading" @on-ok="test()" ref="test">
	<div slot="footer">
    	<Button @click="hideModel('editModel')">关闭</Button>
        <Button type="primary" @click="save()">保存</Button>
    </div>
</Modal>
//按照原来的方式进行即可

版权声明：本文为博主原创文章，转载请附上博文链接！