解決Vue3使用 Ant Design,出現多個Modal,全是黑屏,導致列表頁看不見問題!

久曲健發表於2022-02-07

尷尬問題

解決Vue3使用 Ant Design,出現多個Modal,全是黑屏,導致列表頁看不見問題!

不報錯,但是我看著就難受。

求知路上

請教了下強哥,強哥告訴我可能某個樣式屬性失效引起(無效),建議我F12看下樣式。

接著,我F12狂看元素樣式,查了一個小時未果,我真抓狂了。

都想明天問同事了,但我感覺自己能行,就又堅持了一下。

結果,在摸索過程中,不斷在控制檯嘗試,列印dom物件及屬性,一查就知道了,原來點選新增,編輯按鈕,每次都能彈出5個對話方塊。

鎖定問題

定位到問題就好辦了,然後就是查解決方案的過程了。

偶然在CSDN上的評論區看到這樣一個的答案,完美解決了我的問題,如下圖:

解決Vue3使用 Ant Design,出現多個Modal,全是黑屏,導致列表頁看不見問題!

可能是因為有多個form表單 把它作為單獨的元件提到外面就好了。

結果我調整了下程式碼,把Modal挪出去,就完美解決了我的問題,開心到飛起!
解決Vue3使用 Ant Design,出現多個Modal,全是黑屏,導致列表頁看不見問題!

寫到最後

可能有的同學會說,這有什麼難的?

是呀,你怎麼能體會到學渣的快樂呢,哈哈哈。

相關文章