Modal 对话框点击确定按钮后,对话框会自动消失,如果想阻止它消失,官方给出的解决方案是给 Modal 添加属性 loading,实现方式如下所示:
<template>
<Button type="primary" @click="modal1 = true">展示Modal</Button>
<Modal
v-model="modal1"
title="Title"
:loading="loading"
@on-ok="modalOK">
<p>After you click ok, the dialog box will close in 2 seconds.</p>
</Modal>
</template>
<script>
export default {
data () {
return {
modal1: false,
loading: true
}
},
methods: {
modalOK() {
setTimeout(() => {
this.modal1 = false;
}, 2000);
}
}
}
</script>
这样点击确定按钮会显示 loading 状态,不会自动消失了,但有一个问题是,当遇到验证不通过的情况时,控制不够灵活。
所以,我们可以通过 使用slot插入自定义的底部按钮组 的方式来实现对话框的手动关闭。
功能实现
以下是一个修改密码功能的完整实现,包括控制对话框的显示隐藏和输入内容的验证,其中的请求封装可以参考另外一篇博客:
页面实现:
<span @click="changePwd()">修改密码</span>
<Modal v-model="pwdModal" title="修改密码">
<Form :model="pwdItem" :label-width="80">
<FormItem label="原始密码">
<Input type="password" v-model="pwdItem.oldPwd"></Input>
</FormItem>
<FormItem label="新密码">
<Input type="password" v-model="pwdItem.newPwd"></Input>
</FormItem>
<FormItem label="重复密码">
<Input type="password" v-model="pwdItem.newPwdAgain"></Input>
</FormItem>
</Form>
<!-- 下面这个是实现的重点-->
<div slot="footer">
<Button type="text" size="large" @click="pwdModal=false">取消</Button>
<Button type="primary" size="large" @click="pwdOk()">确定</Button>
</div>
</Modal>
这里有一个需要注意的地方,添加的 slot 不能放在 Form 里面,否则无法显示。
js 部分实现:
<script>
export default {
data () {
return {
pwdModal: false,
pwdItem: {
oldPwd: '',
newPwd: '',
newPwdAgain: ''
}
}
},
methods: {
changePwd:function(){
this.pwdModal = true;
},
pwdOk: function() {
if (!this.pwdItem.oldPwd || !this.pwdItem.newPwd || !this.pwdItem.newPwdAgain) {
this.$Message.error("原始密码和新密码都不能为空!");
return;
}
var param = new URLSearchParams();
param.append('id', 用户id);
param.append('oldPwd', this.pwdItem.oldPwd);
param.append('newPwd', this.pwdItem.newPwd);
param.append('newPwdAgain', this.pwdItem.newPwdAgain);
// 对请求进行封装
Auth.editUserPwd(param).then(response => {
if (response.data.code == 200) {
this.$Message.success("修改密码成功!");
// 成功后关闭对话框
this.pwdModal = false;
// 清空内容,这样下次打开时内容默认为空
this.pwdItem.oldPwd = "";
this.pwdItem.newPwd = "";
this.pwdItem.newPwdAgain = "";
} else {
this.$Message.error(response.data.msg);
}
});
}
}
}
</script>
这样就可以手动控制弹框的显示隐藏了,相对官方给出的方案更加灵活。