vue+element——父級元素fixed,遮罩會在上方

前言

  這種場景還是蠻場景的

  一個共用的head組件,組件裏面通常是當前系統登錄賬號名 退出登錄 修改密碼這樣的彈框

  但是現在我又想head不跟着main內容上下滑動。所以用了fixed 定位。

  問題來了,head組件的下拉菜單 修改密碼彈框的遮罩在上方了,該如何解決呢?

 

需求

  element的彈框的遮罩在上方,彈框的遮罩Z-index 是自增長的,所以改變彈窗的層級是沒有用的

  第一種方法:把下菜單剝離出來,成一個共組件,然後用定位來再head的組件的位置

  缺點:每個頁面都要改,不太好(懶)

  第二方法:我覺得這個是比較常見的問題,我就在element的github上面找到了同款問題

  dialog 有兩個屬性,所以 遮罩不插入body元素上,遮罩插在父元素就好了

 

開始是這樣的

  

然後代碼改成這樣子

  

  

最終的效果是這樣的

  

 

 nice 完美的解決。

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