layer自适应弹窗

问题情况

此问题发生原因很奇葩,我们公司的vue不使用node管理,而是用httpVueLoader插件支持vue,
这就导致我们用不了大部分的框架。vue项目一般来说使用现成的那些知名框架的弹窗比layer要好得多。

此问题出现在异步加载弹窗页面内容。
当我使用layer.open打开一个窗口,并且再去渲染一个组件页面时,内部content区域想自动撑开弹窗窗口高度。
此时layer的弹窗有三层,最外层layer-page盒子,第二层构造函数盒子,第三层content内容盒子。
其中第二层构造函数生成的盒子会自动获取弹窗打开时的content高度并写死height。

这就会有一个问题,layer弹窗有个半秒左右的动画,会导致获取到的高度不对。
网传方法清一色不知道从哪抄来的博客,写的让我头疼还不好使我也懒得贴了。
解决方法如下。指定区域area的高度部分为auto,这样写会导致弹窗顶边在屏幕50%高度处。
所以需要指定offset。首先获取浏览器显示区域高度,我以前的项目都是习惯打开80%90%宽高的窗口,所以窗口固定占屏幕90%高度。
那么他的top值应该是(100-90)/2。也就是5%。如果习惯窗口从别的位置开始就自己写个算法即可。
然后需要在弹窗成功后的回调里,修改第二层盒子的高度来撑开最外层弹窗高度。设置height为auto就可以把自动生成的高度替换掉。盒子里第三层content内容就能把外部撑开了。

layer.open(<
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值