mask（遮罩蒙版）
在popover、側(cè)滑菜單等界面，經(jīng)常會(huì)用到蒙版遮罩；比如popover彈出后，除popover控件外的其它區(qū)域都會(huì)遮罩一層蒙版，用戶(hù)點(diǎn)擊蒙版不會(huì)觸發(fā)蒙版下方的邏輯，而會(huì)關(guān)閉popover同時(shí)關(guān)閉蒙版；再比如側(cè)滑菜單界面，菜單劃出后，除側(cè)滑菜單之外的其它區(qū)域都會(huì)遮罩一層蒙版，用戶(hù)點(diǎn)擊蒙版會(huì)關(guān)閉側(cè)滑菜單同時(shí)關(guān)閉蒙版。
在 MUI 框架中有兩種方式使用 mask：
-
方式一：
ws=plus.webview.currentWebview(); // 顯示遮罩層 ws.setStyle({mask:"rgba(0,0,0,0.5)"}); // 點(diǎn)擊關(guān)閉遮罩層 ws.addEventListener("maskClick",function(){ ws.setStyle({mask:"none"}); },false);
注意：
- 該蒙板在創(chuàng)建時(shí)注冊(cè)監(jiān)聽(tīng)事件，不要多次注冊(cè)；
- 增加狀態(tài)判斷，出現(xiàn)蒙板時(shí)將一個(gè)全局變量（boolean）改變；
-
方式二：
var mask = mui.createMask(callback);//callback為用戶(hù)點(diǎn)擊蒙版時(shí)自動(dòng)執(zhí)行的回調(diào)； mask.show();//顯示遮罩 mask.close();//關(guān)閉遮罩
注意：
+ 關(guān)閉遮罩僅會(huì)關(guān)閉，不會(huì)銷(xiāo)毀；
- 關(guān)閉之后可以再次調(diào)用mask.show()，打開(kāi)遮罩；
兩種方式在使用時(shí)都遇到了坑：
- 方式一是事件多次注冊(cè)與移除監(jiān)聽(tīng)
- 方式二是執(zhí)行
mask.close()時(shí)會(huì)執(zhí)行回調(diào)函數(shù)（傳入的callback）；
方式一的解決方式如下：
mask.png
由方式一產(chǎn)生的遮罩能夠覆蓋子頁(yè)面，能夠解決父子遮罩問(wèn)題。
方式二 mui.createMask(callback) 的源碼如下：
createMask.png
分析源碼可以發(fā)現(xiàn)
close 函數(shù)中會(huì)對(duì)傳入的回調(diào)判斷，如果有就會(huì)執(zhí)行回調(diào)。關(guān)閉遮罩是通過(guò) _remove 實(shí)現(xiàn)，因此可以直接使用 _remove關(guān)閉遮罩而不執(zhí)行回調(diào)。
