在一個頁面的子組件中引用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未被添加該屬性