你真的会封装Dialog弹窗吗？

经常做CRUD的人对弹窗一定不陌生，新增、编辑、查看和Table列操作，均会伴随着弹窗封装，弹窗内包含表单和底部的确认、取消操作，总的来说，这块的业务都挺简单的，但是哪怕接触100个项目，多多少少，不规范封装弹窗引起的问题还是占据了很大百分比。

常见问题

1. 二次打开，上次保留的数据还在；
2. 表单自动校验；
3. 新增和编辑状态的多重量子纠缠
4. 重置表单无法置空

问题拆解

第一个问题，弹窗关闭一般的操作是底部取消、确认以及右上角的x号图标，由于大多数框架的弹窗关闭并不是销毁操作，所有表单内容没有清空的情况下，再次打开，就仍然显示上一次编辑的内容。通常非前端开发人员，只会修改表单数据，然后将控制Dialog显示隐藏的变量设为隐藏，而由于表单组件的复杂设计，当本该响应式数据变化阶段，弹窗已经关闭，部分框架的表单内部逻辑可能执行异常或者根本不执行，正确的做法是使用框架提供的表单实例，调用内置的重置字段值的方法，如resetFields()，错误的做法是每次新打开弹窗都执行表单值初始化，因为渲染存在滞后，有可能会观察到打开的瞬间表单有值，隔一会置空，体验非常不好，建议在关闭弹窗的方法中处理，不推荐使用监听show变量的值处理。

第二个问题，这个我之前在Angular表单项目中遇到过，这个原因一般是这样，关闭前触发了校验时机（blur），这种就是没有调用API重置表单，而是直接修改表单数据，假如表单初始值和你修改的值不一致（有些框架对于默认值null 和 ''空字符处理是不同的），就会触发校验，除此之外还是试着修改trigger或者动态添加和移除rules检验对象（虽然优点不合理）。

第三个问题是重点，根据我的开发经验，分开独立封装肯定没问题，公用一个弹窗，看业务需求复杂度，一般我认为，新增和编辑的字段完全一致（id除外），可以公用，如果部分字段编辑状态，不可修改、有下拉联动、其他更加复杂的情况，我建议编辑单独封装。我们重点说说公用情况下的注意点，

• id值的监听，不要放在Mounted中，而是直接监听或者打开弹窗的方法或者监听中使用id查询详细数据，注意如果直接赋值Table中该条数据，请使用setTimeout或者其他延迟API，否则表单默认值会变成当前row数据，重置表单无法置空！
• 关闭弹窗记得清除id，否则重新点击该条数据，由于id没变化，不会进入监听钩子！
• 关闭弹窗和调用接口顺序，我以前是习惯校验通过就在内部，现在我推荐将提交数据返回给父组件，父组件调用API成功后，关闭弹窗

第四个问题，这个一般是由于，还存在封装的表单控件，如editor、Upload等复杂组件，内部没有完全兼容表单控件的方法，所以resetFields()无效，这种一般要自己使用事件或者控件实例调用类似setValue、clearValue等方法，清空内容。

总结

本文内容均是最近接手项目维护过程中发现的，其实以前也有，只是没做总结，所以再次遇到的时候，很恼火，避免以后还会遇到，特地留意了下项目代码，总结发布，与君共勉！