奇技淫巧—彈窗的處理

每當界面中彈窗一多,交互略複雜的時候,自己的代碼就會處理的非常的亂。這次做的一個自用後臺項目,因爲一開始時要求不高,沒有做好數據的規劃,導致最後項目非常的難易維護。

圖片描述
過多的elDialg直接暴露,處理的邏輯都在一個界面中,data中是數據量過於龐大,很難維護
圖片描述
應該直接將彈窗處理成一個組件,數據也應該統一在組件中或者組件外處理完成,界面的數據結構也會清晰很多。
當彈窗與彈窗之間的交互很多的時候,就不再用各自彈窗之間相互引用,而是統一用一個vuex去集中控制這些彈窗的數據交互。
圖片描述
在項目中,已經將store分割成模塊module,而這些彈窗的visible都是通過Vuex來控制,所以統一放在了一個dialogControl對象中
圖片描述
在mutations中寫入一個可配置的方法,控制dialogControl對象
於是,無論彈窗與彈窗之間如何複雜,只要控制入口就好。

但是當組件與界面之間有個別交互的時候,可以考慮用bus來觸發界面上的數據更新。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章