el-dialog关闭前重置表单
- 问题描述
- 区别解释
问题描述
el-dialog的before-close能接收一个回调函数，在对话框关闭前执行需要的动作，例如我需要的是重置对话框中的表单。
如果只有一个对话框，或者说回调函数不需要额外参数，那么对话框可以这么写：
<el-drawer:before-close="handleClose"
>
......
handleClose可以这么写：
handleClose(done) {this.$confirm('确认关闭吗？').then(_ => {this.$refs.formName.resetFields();done()}).catch(_ => {})
}
但如果有多个对话框共用这一个关闭前的回调函数，就需要指定要重置的表单了。
对话框可以这么写：
<el-drawer:before-close="handleClose('formName')"
>
......
handleClose需要写成闭包，闭包中接收对表单参数的处理：
handleClose(formName) {console.log(111, formName)return (done) => {this.$confirm('确认关闭吗？').then(_ => {this.$refs[formName].resetFields();done()}).catch(_ => {})console.log(222)done()}
}
区别解释
before-close本身是一个回调函数，它执行完了才会关闭对话框。如果不是函数，那就直接关闭对话框。源码：
closeDrawer() {if (typeof this.beforeClose === 'function') {this.beforeClose(this.hide);} else {this.hide();}
},
handleClose() {// This method here will be called by PopupManger, when the `closeOnPressEscape` was set to true// pressing `ESC` will call this method, and also close the drawer.// This method also calls `beforeClose` if there was one.this.closeDrawer();
}
页面加载时:before-close="xxxx"就会执行，可以通过添加打印发现。
:before-close="handleClose"并没有真的执行handleClose方法，这里只是一个指向，在真的触发对话框close时才会执行，
而:before-close="handleClose('formName')"是立即执行了handleClose(‘formName’)方法，并将方法的返回值给before-close属性，如果不把handleClose方法改成闭包，那么:before-close="handleClose('formName')"执行后before-close就变成了一个确切的值而不是一个函数，那么对话框在触发关闭时会直接关闭，就没有什么关闭前的操作了。
而写成闭包就不一样了。按照闭包的写法，handleClose('formName')的返回值是一个函数，也就是说before-close属性是一个函数 ，即handleClose中return的以done为参数的函数。再结合源码 if (typeof this.beforeClose === 'function') {this.beforeClose(this.hide);}，触发关闭时，会先执行这个函数，函数执行完再执行this.hide()
