[{"data":1,"prerenderedAt":477},["ShallowReactive",2],{"blog-\u002Fblog\u002Fwechat_mini_program_mask_layer_demo":3},{"id":4,"title":5,"body":6,"category":465,"cover":466,"csdn":466,"date":467,"description":5,"draft":468,"extension":469,"meta":470,"navigation":79,"path":471,"seo":472,"stem":473,"tags":474,"updated":466,"__hash__":476},"blog\u002Fblog\u002Fwechat_mini_program_mask_layer_demo.md","微信小程序 遮罩层 demo",{"type":7,"value":8,"toc":463},"minimark",[9,13,21,24,229,354,449,454,459],[10,11,12],"p",{},"原理：控制 view 的显示隐藏",[10,14,15,16],{},"为啥要研究这个东西？\n",[17,18],"img",{"alt":19,"src":20},"在这里插入图片描述","https:\u002F\u002Fpub-5ec96507162a4f0a8e713a916117c9f4.r2.dev\u002Fblog\u002F10abc85f89b50ba4e9ec71db66b29474.png",[10,22,23],{},"上代码",[25,26,31],"pre",{"className":27,"code":28,"language":29,"meta":30,"style":30},"language-html shiki shiki-themes github-dark","\u003Cview class=\"mask\" wx:if=\"{{mask}}\">\u003C\u002Fview>\n\n\u003Cview class='search'>\n    \u003Cinput type='text' confirm-type=\"search\" bindfocus=\"ineye\" bindblur=\"outeye\">\u003C\u002Finput>\n    \u003Cview class=\"search-bot\" wx:if=\"{{searchWord === '搜索'}}\" bindtap=\"onSearch\" >搜索\u003C\u002Fview>\n    \u003Cview class=\"search-bot\" wx:else hover-class=\"none\" bindtap=\"searchNoValue\">取消\u003C\u002Fview>\n\u003C\u002Fview>\n","html","",[32,33,34,74,81,97,145,181,219],"code",{"__ignoreMap":30},[35,36,39,43,47,51,54,58,61,63,66,69,71],"span",{"class":37,"line":38},"line",1,[35,40,42],{"class":41},"s95oV","\u003C",[35,44,46],{"class":45},"s6RL2","view",[35,48,50],{"class":49},"svObZ"," class",[35,52,53],{"class":41},"=",[35,55,57],{"class":56},"sU2Wk","\"mask\"",[35,59,60],{"class":49}," wx:if",[35,62,53],{"class":41},[35,64,65],{"class":56},"\"{{mask}}\"",[35,67,68],{"class":41},">\u003C\u002F",[35,70,46],{"class":45},[35,72,73],{"class":41},">\n",[35,75,77],{"class":37,"line":76},2,[35,78,80],{"emptyLinePlaceholder":79},true,"\n",[35,82,84,86,88,90,92,95],{"class":37,"line":83},3,[35,85,42],{"class":41},[35,87,46],{"class":45},[35,89,50],{"class":49},[35,91,53],{"class":41},[35,93,94],{"class":56},"'search'",[35,96,73],{"class":41},[35,98,100,103,107,110,112,115,118,120,123,126,128,131,134,136,139,141,143],{"class":37,"line":99},4,[35,101,102],{"class":41},"    \u003C",[35,104,106],{"class":105},"s4JwU","input",[35,108,109],{"class":49}," type",[35,111,53],{"class":41},[35,113,114],{"class":56},"'text'",[35,116,117],{"class":49}," confirm-type",[35,119,53],{"class":41},[35,121,122],{"class":56},"\"search\"",[35,124,125],{"class":49}," bindfocus",[35,127,53],{"class":41},[35,129,130],{"class":56},"\"ineye\"",[35,132,133],{"class":49}," bindblur",[35,135,53],{"class":41},[35,137,138],{"class":56},"\"outeye\"",[35,140,68],{"class":41},[35,142,106],{"class":45},[35,144,73],{"class":41},[35,146,148,150,152,154,156,159,161,163,166,169,171,174,177,179],{"class":37,"line":147},5,[35,149,102],{"class":41},[35,151,46],{"class":45},[35,153,50],{"class":49},[35,155,53],{"class":41},[35,157,158],{"class":56},"\"search-bot\"",[35,160,60],{"class":49},[35,162,53],{"class":41},[35,164,165],{"class":56},"\"{{searchWord === '搜索'}}\"",[35,167,168],{"class":49}," bindtap",[35,170,53],{"class":41},[35,172,173],{"class":56},"\"onSearch\"",[35,175,176],{"class":41}," >搜索\u003C\u002F",[35,178,46],{"class":45},[35,180,73],{"class":41},[35,182,184,186,188,190,192,194,197,200,202,205,207,209,212,215,217],{"class":37,"line":183},6,[35,185,102],{"class":41},[35,187,46],{"class":45},[35,189,50],{"class":49},[35,191,53],{"class":41},[35,193,158],{"class":56},[35,195,196],{"class":49}," wx:else",[35,198,199],{"class":49}," hover-class",[35,201,53],{"class":41},[35,203,204],{"class":56},"\"none\"",[35,206,168],{"class":49},[35,208,53],{"class":41},[35,210,211],{"class":56},"\"searchNoValue\"",[35,213,214],{"class":41},">取消\u003C\u002F",[35,216,46],{"class":45},[35,218,73],{"class":41},[35,220,222,225,227],{"class":37,"line":221},7,[35,223,224],{"class":41},"\u003C\u002F",[35,226,46],{"class":45},[35,228,73],{"class":41},[25,230,234],{"className":231,"code":232,"language":233,"meta":30,"style":30},"language-css shiki shiki-themes github-dark",".mask {\n  background-color: rgb(0, 0, 0, 0.9);\n  position: fixed;\n  top: 55px;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n}\n","css",[32,235,236,244,279,292,308,319,334,348],{"__ignoreMap":30},[35,237,238,241],{"class":37,"line":38},[35,239,240],{"class":49},".mask",[35,242,243],{"class":41}," {\n",[35,245,246,250,253,256,259,262,265,267,269,271,273,276],{"class":37,"line":76},[35,247,249],{"class":248},"sDLfK","  background-color",[35,251,252],{"class":41},": ",[35,254,255],{"class":248},"rgb",[35,257,258],{"class":41},"(",[35,260,261],{"class":248},"0",[35,263,264],{"class":41},", ",[35,266,261],{"class":248},[35,268,264],{"class":41},[35,270,261],{"class":248},[35,272,264],{"class":41},[35,274,275],{"class":248},"0.9",[35,277,278],{"class":41},");\n",[35,280,281,284,286,289],{"class":37,"line":83},[35,282,283],{"class":248},"  position",[35,285,252],{"class":41},[35,287,288],{"class":248},"fixed",[35,290,291],{"class":41},";\n",[35,293,294,297,299,302,306],{"class":37,"line":99},[35,295,296],{"class":248},"  top",[35,298,252],{"class":41},[35,300,301],{"class":248},"55",[35,303,305],{"class":304},"snl16","px",[35,307,291],{"class":41},[35,309,310,313,315,317],{"class":37,"line":147},[35,311,312],{"class":248},"  left",[35,314,252],{"class":41},[35,316,261],{"class":248},[35,318,291],{"class":41},[35,320,321,324,326,329,332],{"class":37,"line":183},[35,322,323],{"class":248},"  width",[35,325,252],{"class":41},[35,327,328],{"class":248},"100",[35,330,331],{"class":304},"%",[35,333,291],{"class":41},[35,335,336,339,341,343,346],{"class":37,"line":221},[35,337,338],{"class":248},"  height",[35,340,252],{"class":41},[35,342,328],{"class":248},[35,344,345],{"class":304},"vh",[35,347,291],{"class":41},[35,349,351],{"class":37,"line":350},8,[35,352,353],{"class":41},"}\n",[25,355,359],{"className":356,"code":357,"language":358,"meta":30,"style":30},"language-js shiki shiki-themes github-dark","Page({\n  data: {\n    mask: false, \u002F\u002F input 搜索框聚焦时遮罩层\n  },\n\n  ineye: function () {\n    this.setData({\n      mask: true,\n    });\n  },\n\n  outeye: function () {\n    this.setData({\n      mask: false,\n    });\n  },\n});\n","js",[32,360,361,366,371,376,381,385,390,395,400,406,411,416,422,427,433,438,443],{"__ignoreMap":30},[35,362,363],{"class":37,"line":38},[35,364,365],{},"Page({\n",[35,367,368],{"class":37,"line":76},[35,369,370],{},"  data: {\n",[35,372,373],{"class":37,"line":83},[35,374,375],{},"    mask: false, \u002F\u002F input 搜索框聚焦时遮罩层\n",[35,377,378],{"class":37,"line":99},[35,379,380],{},"  },\n",[35,382,383],{"class":37,"line":147},[35,384,80],{"emptyLinePlaceholder":79},[35,386,387],{"class":37,"line":183},[35,388,389],{},"  ineye: function () {\n",[35,391,392],{"class":37,"line":221},[35,393,394],{},"    this.setData({\n",[35,396,397],{"class":37,"line":350},[35,398,399],{},"      mask: true,\n",[35,401,403],{"class":37,"line":402},9,[35,404,405],{},"    });\n",[35,407,409],{"class":37,"line":408},10,[35,410,380],{},[35,412,414],{"class":37,"line":413},11,[35,415,80],{"emptyLinePlaceholder":79},[35,417,419],{"class":37,"line":418},12,[35,420,421],{},"  outeye: function () {\n",[35,423,425],{"class":37,"line":424},13,[35,426,394],{},[35,428,430],{"class":37,"line":429},14,[35,431,432],{},"      mask: false,\n",[35,434,436],{"class":37,"line":435},15,[35,437,405],{},[35,439,441],{"class":37,"line":440},16,[35,442,380],{},[35,444,446],{"class":37,"line":445},17,[35,447,448],{},"});\n",[10,450,451],{},[17,452],{"alt":19,"src":453},"https:\u002F\u002Fpub-5ec96507162a4f0a8e713a916117c9f4.r2.dev\u002Fblog\u002F47645852cb54742582d1c98d13b938fe.png",[10,455,456],{},[17,457],{"alt":19,"src":458},"https:\u002F\u002Fpub-5ec96507162a4f0a8e713a916117c9f4.r2.dev\u002Fblog\u002F8abc08fbc427219dc9812f35854f0e1b.png",[460,461,462],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s6RL2, html code.shiki .s6RL2{--shiki-default:#FDAEB7;--shiki-default-font-style:italic}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}",{"title":30,"searchDepth":76,"depth":76,"links":464},[],"前端",null,"2020-04-05",false,"md",{},"\u002Fblog\u002Fwechat_mini_program_mask_layer_demo",{"title":5,"description":5},"blog\u002Fwechat_mini_program_mask_layer_demo",[475],"微信小程序","DZ5q5myaITvg2ngaRFQtrf4Q7MbyJhYesIkKG4f6WIs",1780076048581]