今天遇到一个需求:
弹出的modal框中,勾选数据,在点击modal框的确定时,调用接口,如果数据返回空,关闭modal框,否则modal框不关闭,提示他重新勾选数据。
modal框有props参数 loading默认是false,就是在点击确定直接关闭modal框。如果设置loading设置为true,则点击确定不会自动关闭modal框,需要手动设置modal框的显示和隐藏。这是我又发现另一个问题,请求一次提示重新勾选数据后,modal的确定按钮为loading加载状态,无法重新勾选进行第二次请求发送,数据判断。研究了一会得出了一个方法:
<template>
<Modal
v-model="showModal"
title="Common Modal dialog box title"
:loading="loading"
@on-ok="ok"
>
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
</Modal>
</template>
<script>
export default {
name: "OrderDetail",
data(){
return {
showModal:false,
loading:true
}
},
methods:{
async ok(){
let data = await this.$http.post(`/api/discounts/shop/in`);
if (data.length > 0) {
this.$Message.info({
content: `请重新勾选数据`,
duration: 3
})
//关键的地方
this.loading = false;
this.$nextTick(() => {
this.loading = true;
return;
});//将回调延迟到下次dom更新循环后执行,一般在修改数据后立即使用它,然后等待dom更新
//
return false;
}
this.showModal=false;
}
}
}
<script>