解決layer彈出層自適應(yīng)頁面大小的問題
前兩天在Vue中引入了Vue-layer插件，實(shí)現(xiàn)了彈出層效果。不過由于是在22寸屏下開發(fā)的，沒多想，彈出層的area的長寬就設(shè)定的都是800px，效果還很好。結(jié)果那給用戶看，他們是12寸的筆記本。彈出層直接撐爆了頁面，無法關(guān)閉。。。
網(wǎng)上的解決方案大都是以下幾種：
1、改成百分比形式。有bug，下面細(xì)說。
2、改成em，rem等。同上
3、采用area：auto?？赡苁且?yàn)椴捎昧藄wiper的原因吧，這樣設(shè)置會導(dǎo)致彈出層出現(xiàn)“頂天立地”的效果
4、采用iframeAuto。這個(gè)沒太搞懂怎么用，而且網(wǎng)上查的資料，很多人都反映不能用。
5、根據(jù)當(dāng)前頁面高度計(jì)算好以后，再填入高度。這應(yīng)該是最優(yōu)解，但是有點(diǎn)麻煩。
嘗試了很多辦法，都無法實(shí)現(xiàn)想要的效果，最后沒辦法，只能去研究為什么百分比和rem這種形式會有bug。
這個(gè)bug的效果是，雖然彈出窗按比例展示了，但是里面包含的一個(gè)div的由于高度很小，導(dǎo)致看不到任何內(nèi)容。查看網(wǎng)頁代碼，很容易就找到出問題的所在，這個(gè)div的height只有50px，不知道怎么會這樣。
估摸著應(yīng)該是js文件計(jì)算高度是出錯(cuò)了。這個(gè)div的id是vlip1545899541487，猜測應(yīng)該是一個(gè)固定前綴加了隨機(jī)數(shù)。只查找vlip，在vue-layer.js中果然找到了相應(yīng)的代碼
id:"vlip"+(new Date).getTime()
id是vlip加時(shí)間戳生成的，然后再往后看，就會發(fā)現(xià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。。。
所以只要把這里的生成代碼略加改動就好。
{return{height:this.options.area[1].indexOf("%")>=0?"90%":parseInt(this.options.area[1])-50+"px",minHeight:"inherit",overflow:"auto"}}}
增加三目運(yùn)算符，判斷如果包含%的話，就寫死一個(gè)值90%。其實(shí)這樣不算完美，因?yàn)椴煌叽绲娘@示屏，90%所展示的效果都不太一樣。但是這樣比較省事。
以上這篇解決layer彈出層自適應(yīng)頁面大小的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JavaScript中為事件指定處理程序的五種方式,結(jié)合實(shí)例形式簡單分析了JavaScript事件處理的相關(guān)原理與事件指定處理程序的五種常用方式,需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細(xì)介紹了通過JS調(diào)用某段SQL語句的相關(guān)方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
javascript實(shí)現(xiàn)簡單的html5視頻播放器
網(wǎng)頁視頻音頻播放器大家并不陌生，在IE中我們可以運(yùn)行ActiveX來嵌入微軟的Media Player或者其他的本地播放器，當(dāng)然可能大部分我們都是使用Flash來制作播放器。在HTML5發(fā)展迅速的今天，讓我們嘗試用HTML5來制作網(wǎng)頁播放器吧，畢竟無論是PC還是移動設(shè)備，HTML5是未來的趨勢2015-05-05
這篇文章主要介紹了ES2020系列之空值合并運(yùn)算符 '??'，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07- 眾所周知，IE8開放了對DOM原型的支持以及ECMA v5的兩個(gè)新方法——Object.defineProperty和Object.getOwnPropertyDexcriptor（單詞好長……），并且這兩個(gè)新方法居然只能用于DOM。2009-12-12
javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(自寫原生js)
常用的頁面效果有彈出層效果，無縫滾動效果，選項(xiàng)卡切換效果，接下來與大家分享一款自己用原生javascript寫的選項(xiàng)卡切換效果，感興趣的朋友可以參考下哈2013-03-03
javascript實(shí)現(xiàn)類似超鏈接的效果
這篇文章主要介紹了使用javascript實(shí)現(xiàn)類似超鏈接的效果的特效，通過示例熟悉javascript事件，這里推薦給大家。2014-12-12
本文為大家介紹下前臺js調(diào)用后臺方法，下面有個(gè)不錯(cuò)的示例，喜歡的朋友可以參考下2013-12-12
JavaScript偽數(shù)組和數(shù)組的使用與區(qū)別
這篇文章主要給大家介紹了關(guān)于JavaScript偽數(shù)組和數(shù)組使用與區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
通常我們有一份webpack.dev.config.js使用webpack-dev-server的proxy，代理到開發(fā)服務(wù)器，來解決本地跨域問題。假如項(xiàng)目變大，可能需要proxy到不同環(huán)境，那么如何解決webpack-dev-server代理常切換問題，下面就一起來了解一下2019-01-01