iview modal 弹出框 不自动消失的方法

iview modal 弹出框 不自动消失的方法

点击ok的时候会自动关闭弹出框

// ok时会自动关闭
<Modal
     v-model="modal1"
     title="modal title"
     @on-ok="ok"
     @on-cancel="cancel">
</Modal>

但是，有时候我们会在弹出框关闭前做一系列操作，最常见的就像，input验证不通过。则弹出框不能关闭，等所有验证成功后才能关闭弹出框。

以下是两种方法:

1. slot=“footer”

// 使用 <div slot="footer"></div>
// <div slot="footer"></div>会去掉默认的确定和取消这样就可以自定义按钮
<Modal
     v-model="modal1"
     title="modal title">
     <div slot="footer"></div>
</Modal>

2. loading

// 不想自己自定义按钮的话，也可使用loading
<Modal
     v-model="modal1"
     title="modal title"
     @on-ok="ok"
     ref="modal"
     :loading='true'
     @on-cancel="cancel">
</Modal>

// 当你点击确定的时候，会发现按钮会一直再转，很不好看，
// 只需要在ok方法内加上一句
// this.$refs.modal.buttonLoading = false; 即可