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

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

1、改成百分比形式。有bug，下面細說。

2、改成em，rem等。同上

3、采用area：auto。可能是因為采用了swiper的原因吧，這樣設置會導致彈出層出現(xiàn)“頂天立地”的效果

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

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

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

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

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

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

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

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

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

所以只要把這里的生成代碼略加改動就好。

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

增加三目運算符，判斷如果包含%的話，就寫死一個值90%。其實這樣不算完美，因為不同尺寸的顯示屏，90%所展示的效果都不太一樣。但是這樣比較省事。

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

最新評論