[{"data":1,"prerenderedAt":528},["ShallowReactive",2],{"blog-\u002Fblog\u002Fwechat_mini_program_mask_layer_demo":3},{"id":4,"title":5,"body":6,"category":514,"cover":515,"csdn":515,"date":516,"description":5,"draft":517,"extension":518,"meta":519,"navigation":79,"path":520,"seo":521,"stem":522,"tags":523,"updated":515,"__hash__":527},"blog\u002Fblog\u002Fwechat_mini_program_mask_layer_demo.md","微信小程序 遮罩层 demo",{"type":7,"value":8,"toc":512},"minimark",[9,13,21,24,229,354,498,503,508],[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-light","\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},"sgsFI","\u003C",[35,44,46],{"class":45},"sB1qb","view",[35,48,50],{"class":49},"s7eDp"," class",[35,52,53],{"class":41},"=",[35,55,57],{"class":56},"sYBdl","\"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},"shJU0","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-light",".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},"sYu0t","  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},"sD7c4","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-light","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,369,374,388,393,397,410,423,434,440,445,450,462,473,482,487,492],{"__ignoreMap":30},[35,362,363,366],{"class":37,"line":38},[35,364,365],{"class":49},"Page",[35,367,368],{"class":41},"({\n",[35,370,371],{"class":37,"line":76},[35,372,373],{"class":41},"  data: {\n",[35,375,376,379,382,384],{"class":37,"line":83},[35,377,378],{"class":41},"    mask: ",[35,380,381],{"class":248},"false",[35,383,264],{"class":41},[35,385,387],{"class":386},"sAwPA","\u002F\u002F input 搜索框聚焦时遮罩层\n",[35,389,390],{"class":37,"line":99},[35,391,392],{"class":41},"  },\n",[35,394,395],{"class":37,"line":147},[35,396,80],{"emptyLinePlaceholder":79},[35,398,399,402,404,407],{"class":37,"line":183},[35,400,401],{"class":49},"  ineye",[35,403,252],{"class":41},[35,405,406],{"class":304},"function",[35,408,409],{"class":41}," () {\n",[35,411,412,415,418,421],{"class":37,"line":221},[35,413,414],{"class":248},"    this",[35,416,417],{"class":41},".",[35,419,420],{"class":49},"setData",[35,422,368],{"class":41},[35,424,425,428,431],{"class":37,"line":350},[35,426,427],{"class":41},"      mask: ",[35,429,430],{"class":248},"true",[35,432,433],{"class":41},",\n",[35,435,437],{"class":37,"line":436},9,[35,438,439],{"class":41},"    });\n",[35,441,443],{"class":37,"line":442},10,[35,444,392],{"class":41},[35,446,448],{"class":37,"line":447},11,[35,449,80],{"emptyLinePlaceholder":79},[35,451,453,456,458,460],{"class":37,"line":452},12,[35,454,455],{"class":49},"  outeye",[35,457,252],{"class":41},[35,459,406],{"class":304},[35,461,409],{"class":41},[35,463,465,467,469,471],{"class":37,"line":464},13,[35,466,414],{"class":248},[35,468,417],{"class":41},[35,470,420],{"class":49},[35,472,368],{"class":41},[35,474,476,478,480],{"class":37,"line":475},14,[35,477,427],{"class":41},[35,479,381],{"class":248},[35,481,433],{"class":41},[35,483,485],{"class":37,"line":484},15,[35,486,439],{"class":41},[35,488,490],{"class":37,"line":489},16,[35,491,392],{"class":41},[35,493,495],{"class":37,"line":494},17,[35,496,497],{"class":41},"});\n",[10,499,500],{},[17,501],{"alt":19,"src":502},"https:\u002F\u002Fpub-5ec96507162a4f0a8e713a916117c9f4.r2.dev\u002Fblog\u002F47645852cb54742582d1c98d13b938fe.png",[10,504,505],{},[17,506],{"alt":19,"src":507},"https:\u002F\u002Fpub-5ec96507162a4f0a8e713a916117c9f4.r2.dev\u002Fblog\u002F8abc08fbc427219dc9812f35854f0e1b.png",[509,510,511],"style",{},"html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .sB1qb, html code.shiki .sB1qb{--shiki-default:#B31D28;--shiki-default-font-style:italic}html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}html pre.shiki code .shJU0, html code.shiki .shJU0{--shiki-default:#22863A}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 .sYu0t, html code.shiki .sYu0t{--shiki-default:#005CC5}html pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":30,"searchDepth":76,"depth":76,"links":513},[],"微信小程序",null,"2020-04-05",false,"md",{},"\u002Fblog\u002Fwechat_mini_program_mask_layer_demo",{"title":5,"description":5},"blog\u002Fwechat_mini_program_mask_layer_demo",[514,524,525,526],"遮罩层","WXSS","交互效果","EnDAeki1JckMuyK9ZTHsfv8qL8QLWtA8VRAcNHmgJEQ",1793010851940]