工作中使用了iview-admin作為系統(tǒng)UI框架河胎，在進(jìn)行表單處理時(shí)关斜，不可避免的大量使用到了modal組件蛔外。過(guò)程中遇到問(wèn)題：
新建和編輯時(shí)應(yīng)該使用同一個(gè)組件作為基礎(chǔ)，這樣在代碼改動(dòng)時(shí)更加高效也物。那么modal組件就需要封裝到一個(gè)子組件中方便調(diào)用。這樣就涉及到從父組件中觸發(fā)修改子組件的modal值的修改列疗。
假設(shè)：
父組件為Father.vue滑蚯，有一個(gè)按鈕點(diǎn)擊后彈出子組件中的modal，綁定值modalFlagFather
子組件為Child.vue抵栈，modal的綁定值為modalFlagChild告材。
最簡(jiǎn)單的思考，在子組件中watch父組件傳入的參數(shù)modalFlagFather古劲，修改modalFlagChild斥赋，完成彈出框的打開(kāi)和關(guān)閉。
踩坑1：在modal組件中使用on-ok和on-cancel事件产艾，當(dāng)觸發(fā)on-ok時(shí)灿渴，無(wú)法阻止modal關(guān)閉。但是表單中有必填項(xiàng)胰舆，需要校驗(yàn)成功且接口調(diào)用成功后才關(guān)閉對(duì)話框骚露。
原因：iview的modal組件中沒(méi)有提供相關(guān)的機(jī)制。
解決方案：在底部采用slot="footer"的方式自定義取消和確定按鈕及相關(guān)事件缚窿。
踩坑2：在處理上面問(wèn)題的過(guò)程中棘幸，嘗試過(guò)使用loading屬性阻止彈框關(guān)閉的方法。但仍然不能解決問(wèn)題倦零，因?yàn)槿绻枰恢弊柚箯椏蛳笮托枰恢北３謑oading狀態(tài)吨悍，但實(shí)際需求中，如果表單校驗(yàn)失敗蹋嵌，我們需要在按鈕處于可再次點(diǎn)擊的狀態(tài)同時(shí)阻止彈框關(guān)閉育瓜。
踩坑3：當(dāng)點(diǎn)擊右上角的×或背景觸發(fā)modal的消失后，點(diǎn)擊父組件中的按鈕栽烂，彈框無(wú)法再次彈出躏仇。因?yàn)辄c(diǎn)擊右上角的×或背景時(shí)，改變的是子組件中modalFlagChild的值腺办，而父組件中的modalFlagFather仍然為true焰手，當(dāng)再次點(diǎn)擊父組件中的按鈕時(shí)，modalFlagFather的值是由true變?yōu)閠rue怀喉，沒(méi)有觸發(fā)子組件中的watch书妻，所以無(wú)法再次彈出。
解決方案：為modal綁定on-visible-change事件躬拢，當(dāng)modal的顯隱狀態(tài)發(fā)生改變時(shí)躲履，觸發(fā)事件修改父組件的modalFlagFather值。
踩過(guò)上面的三個(gè)坑之后聊闯，對(duì)modal組件就得到了一個(gè)最佳實(shí)踐工猜。總結(jié)出來(lái)沒(méi)有太多內(nèi)容馅袁，可是在實(shí)際工作中卻使用了大量的時(shí)間和精力域慷，排查問(wèn)題，尋找解決方案汗销。
