vue----子組件引用vux popup mask遮罩在最上層解決辦法 z-index問題


在一個頁面的子組件中引用vux的popup組件時,出現mask遮罩在最上層的問題,百度了一下發現有兩種解決辦法,現提供第三種。

popup在子組件引用時,vux將vux-popup-mask默認添加到body末尾,如果引用popup的子組件的根節點未添加z-index屬性,子元素無論層級多高都會被遮罩,mask會在最上層。

所以解決辦法就是給子組件的根節點添加大於500的z-index。

百度的兩種解決辦法:

1,修改源碼:

 

 將popup.js中的

document.body.appendChild(this.divMask)
改為
document.querySelector('.vux-popup-dialog').after(this.divMask)
經過試驗后該方法生效,但是關閉popup時,遮罩仍在最上層,導致頁面無法點擊
2,

找到該Popup組件的祖先DOM節點是否被設置該CSS屬性:-webkit-overflow-scrolling: touch;
若被設置將該CSS屬性,則去掉即可。

該方法未試驗,祖先dom未被添加該屬性


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM