前兩天在Vue中引入了Vue-layer插件，實現了彈出層效果。不過由於是在22寸屏下開發的，沒多想，彈出層的area的長寬就設定的都是800px，效果還很好。結果那給用戶看，他們是12寸的筆記本。彈出層直接撐爆了頁面，無法關閉。。。
網上的解決方案大都是以下幾種：
1、改成百分比形式。有bug，下面細說。
2、改成em，rem等。同上
3、採用area：auto。可能是因爲採用了swiper的原因吧，這樣設置會導致彈出層出現“頂天立地”的效果
4、採用iframeAuto。這個沒太搞懂怎麼用，而且網上查的資料，很多人都反映不能用。
5、根據當前頁面高度計算好以後，再填入高度。這應該是最優解，但是有點麻煩。
嘗試了很多辦法，都無法實現想要的效果，最後沒辦法，只能去研究爲什麼百分比和rem這種形式會有bug。這個bug的效果是，雖然彈出窗按比例展示了，但是裏面包含的一個div的由於高度很小，導致看不到任何內容。查看網頁代碼，很容易就找到出問題的所在，這個div的height只有50px，不知道怎麼會這樣。估摸着應該是js文件計算高度是出錯了。這個div的id是vlip1545899541487，猜測應該是一個固定前綴加了隨機數。只查找vlip，在vue-layer.js中果然找到了相應的代碼
id:"vlip"+(new Date).getTime()
id是vlip加時間戳生成的，然後再往後看，就會發現問題所在
{return{height:parseInt(this.options.area[1])-50+"px",minHeight:"inherit",overflow:"auto"}}}
直接去area的第二個參數轉成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%所展示的效果都不太一樣。但是這樣比較省事。