阻止 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>

这样就可以手动控制弹框的显示隐藏了，相对官方给出的方案更加灵活。