前兩天在Vue中引入了Vue-layer插件，實(shí)現(xiàn)了彈出層效果。不過(guò)由于是在22寸屏下開(kāi)發(fā)的，沒(méi)多想，彈出層的area的長(zhǎng)寬就設(shè)定的都是800px，效果還很好。結(jié)果那給用戶(hù)看，他們是12寸的筆記本。彈出層直接撐爆了頁(yè)面，無(wú)法關(guān)閉。。。

網(wǎng)上的解決方案大都是以下幾種：

1、改成百分比形式。有bug，下面細(xì)說(shuō)。

2、改成em，rem等。同上

3、采用area：auto?？赡苁且?yàn)椴捎昧藄wiper的原因吧，這樣設(shè)置會(huì)導(dǎo)致彈出層出現(xiàn)“頂天立地”的效果

4、采用iframeAuto。這個(gè)沒(méi)太搞懂怎么用，而且網(wǎng)上查的資料，很多人都反映不能用。

5、根據(jù)當(dāng)前頁(yè)面高度計(jì)算好以后，再填入高度。這應(yīng)該是最優(yōu)解，但是有點(diǎn)麻煩。

嘗試了很多辦法，都無(wú)法實(shí)現(xiàn)想要的效果，最后沒(méi)辦法，只能去研究為什么百分比和rem這種形式會(huì)有bug。

這個(gè)bug的效果是，雖然彈出窗按比例展示了，但是里面包含的一個(gè)div的由于高度很小，導(dǎo)致看不到任何內(nèi)容。查看網(wǎng)頁(yè)代碼，很容易就找到出問(wèn)題的所在，這個(gè)div的height只有50px，不知道怎么會(huì)這樣。

估摸著應(yīng)該是js文件計(jì)算高度是出錯(cuò)了。這個(gè)div的id是vlip1545899541487，猜測(cè)應(yīng)該是一個(gè)固定前綴加了隨機(jī)數(shù)。只查找vlip，在vue-layer.js中果然找到了相應(yīng)的代碼

id:"vlip"+(new Date).getTime()

id是vlip加時(shí)間戳生成的，然后再往后看，就會(huì)發(fā)現(xiàn)問(wèn)題所在

{return{height:parseInt(this.options.area[1])-50+"px",minHeight:"inherit",overflow:"auto"}}}

直接去area的第二個(gè)參數(shù)轉(zhuǎn)成int值減去50再加上后綴“px”，所以假如我們配了80%的高度，最終的height只有30px。。。

所以只要把這里的生成代碼略加改動(dòng)就好。

{return{height:this.options.area[1].indexOf("%")>=0?"90%":parseInt(this.options.area[1])-50+"px",minHeight:"inherit",overflow:"auto"}}}

增加三目運(yùn)算符，判斷如果包含%的話(huà)，就寫(xiě)死一個(gè)值90%。其實(shí)這樣不算完美，因?yàn)椴煌叽绲娘@示屏，90%所展示的效果都不太一樣。但是這樣比較省事。

以上這篇解決layer彈出層自適應(yīng)頁(yè)面大小的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。