当前位置 博文首页 > 盛夏温暖流年：阻止 vue Modal 对话框的自动消失（附：修改密码
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插入自定义的底部按钮组 的方式来实现对话框的手动关闭。
以下是一个修改密码功能的完整实现，包括控制对话框的显示隐藏和输入内容的验证，其中的请求封装可以参考另外一篇博客：
vue 项目封装 axios 的 HTTP 请求
页面实现：
<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>
这样就可以手动控制弹框的显示隐藏了，相对官方给出的方案更加灵活。
cs