工作中使用了iview-admin作为系统UI框架，在进行表单处理时，不可避免的大量使用到了modal组件。过程中遇到问题：
新建和编辑时应该使用同一个组件作为基础，这样在代码改动时更加高效。那么modal组件就需要封装到一个子组件中方便调用。这样就涉及到从父组件中触发修改子组件的modal值的修改。
假设：
父组件为Father.vue，有一个按钮点击后弹出子组件中的modal，绑定值modalFlagFather
子组件为Child.vue，modal的绑定值为modalFlagChild。
最简单的思考，在子组件中watch父组件传入的参数modalFlagFather，修改modalFlagChild，完成弹出框的打开和关闭。
踩坑1：在modal组件中使用on-ok和on-cancel事件，当触发on-ok时，无法阻止modal关闭。但是表单中有必填项，需要校验成功且接口调用成功后才关闭对话框。
原因：iview的modal组件中没有提供相关的机制。
解决方案：在底部采用slot="footer"的方式自定义取消和确定按钮及相关事件。
踩坑2：在处理上面问题的过程中，尝试过使用loading属性阻止弹框关闭的方法。但仍然不能解决问题，因为如果需要一直阻止弹框消失，就需要一直保持loading状态，但实际需求中，如果表单校验失败，我们需要在按钮处于可再次点击的状态同时阻止弹框关闭。
踩坑3：当点击右上角的×或背景触发modal的消失后，点击父组件中的按钮，弹框无法再次弹出。因为点击右上角的×或背景时，改变的是子组件中modalFlagChild的值，而父组件中的modalFlagFather仍然为true，当再次点击父组件中的按钮时，modalFlagFather的值是由true变为true，没有触发子组件中的watch，所以无法再次弹出。
解决方案：为modal绑定on-visible-change事件，当modal的显隐状态发生改变时，触发事件修改父组件的modalFlagFather值。
踩过上面的三个坑之后，对modal组件就得到了一个最佳实践。总结出来没有太多内容，可是在实际工作中却使用了大量的时间和精力，排查问题，寻找解决方案。
网友评论