經常做CRUD的人對彈窗一定不陌生，新增、編輯、查看和Table列操作，均會伴隨着彈窗封裝，彈窗內包含表單和底部的確認、取消操作，總的來説，這塊的業務都挺簡單的，但是哪怕接觸100個項目，多多少少，不規範封裝彈窗引起的問題還是佔據了很大百分比。
常見問題
- 二次打開，上次保留的數據還在；
- 表單自動校驗；
- 新增和編輯狀態的多重量子糾纏
- 重置表單無法置空
問題拆解
第一個問題，彈窗關閉一般的操作是底部取消、確認以及右上角的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等方法，清空內容。
總結
本文內容均是最近接手項目維護過程中發現的，其實以前也有，只是沒做總結，所以再次遇到的時候，很惱火，避免以後還會遇到，特地留意了下項目代碼，總結髮布，與君共勉！
