使用官方的代码,value(可用v-model双向绑定)控制modal框的显示隐藏,会出现只要点击了确定按钮,v-model绑定的值自动变为false,关闭modal框,想要的效果:点击确定按钮判断条件决定modal框是否关闭
解决方案一:
<template>
<div>
<button style="margin-left: 10px;" @click="btn">demo按钮</button>
<Modal
:value="modalConfig.modalShow"
title="新增"
:transfer="false"
:mask-closable="false"
:width="400"
@on-ok="Submit"
@on-cancel="cancel"
:loading="modalConfig.loading"
>
<Input v-model.trim="age"></Input>
</Modal>
</div>
</template>
<script>
export default{
data(){
return {
age:'男',
modalConfig:{
modalShow:false,
loading:true
}
}
},
methods:{
btn(){
this.modalConfig.modalShow = true
},
Submit(){
if(this.age !== '男'){
this.modalConfig.loading = false;
this.$nextTick(() => {
this.modalConfig.loading = true;
})
this.$Message.error("输入框必须为男!");
}else{
this.modalConfig.modalShow = false
this.$Message.error("成功");
}
},
cancel(){
this.modalConfig.modalShow = false
}
}
}
</script>
<style>
</style>
解决方案二:
<template>
<div>
<button style="margin-left: 10px;" @click="btn">demo按钮</button>
<Modal
v-model="modalConfig.modalShow"
title="新增"
:transfer="false"
:mask-closable="false"
:width="400"
>
<Input v-model.trim="age"></Input>
<div slot="footer">
<Button type="primary" @click="cancel">取消</Button>
<Button type="primary" @click="submit">确定</Button>
</div>
</Modal>
</div>
</template>
<script>
export default{
data(){
return {
age:'男',
modalConfig:{
modalShow:false,
}
}
},
methods:{
btn(){
this.modalConfig.modalShow = true
},
submit(){
if(this.age !== '男'){
this.$Message.error("输入框必须为男!");
}else{
this.modalConfig.modalShow = false
this.$Message.error("成功");
}
},
cancel(){
this.modalConfig.modalShow = false
}
}
}
</script>
<style>
</style>