layer.open 的 resize 参数必须设为 true,否则弹层右下角无拉伸手柄;需配合数组格式的 area(如['600px','400px']),type:2 时须加 iframeAuto:true 才能使 iframe 自适应高度。
layer.open 的 resize 参数必须设为 true
默认情况下,layer.open() 创建的弹层是禁止拖拽拉伸的。想让右下角出现可拖拽的拉伸手柄,必须显式设置 resize: true —— 即使你没改过它,也极大概率是 false(layui 2.x 默认值就是 false)。
常见错误是只写了 resize: true 却没配 area 的初始值,导致拉伸后尺寸异常。注意:resize 仅控制「是否允许用户手动拉伸」,不负责自动适配逻辑。
-
area必须是数组格式,如['600px', '400px']或['80%', '60%'];不能写成'600px'单值(会失效) - 百分比宽高在拉伸时行为不稳定,尤其高度百分比可能受父容器限制而卡死,推荐宽度用百分比、高度用固定值或
auto - 若弹层内容是 iframe,需额外加
iframeAuto: true才能让 iframe 内容高度随弹层拉伸同步变化
拉伸后 iframe 内容不自适应?补上 iframeAuto: true
当 type: 2(即加载 iframe 页面)且开启 resize: true 时,弹层容器能拉伸,但 iframe 标签本身不会自动撑开——它的 height 仍维持初始值,造成底部留白或滚动条。
iframeAuto: true 是 Layui 提供的专用开关,它会在弹层尺寸变化后,主动重设 iframe 的 style.height,并触发内部 resize 事件通知子页面。
- 仅对
type: 2生效,type: 1(内嵌 HTML)无需此配置 - 子页面需监听
message或暴露window.parent.layer.iframeAuto回调才能响应高度变化(非必需,但建议) - 如果子页面本身有复杂布局或第三方组件(如 echarts、swiper),拉伸后可能需要手动重绘,
iframeAuto不会帮你做这事
窗口缩放时弹层不跟随?得自己监听 resize 事件
Layui 的 resize: true 只管用户鼠标拖拽,不管浏览器窗口大小变化。一旦用户缩放浏览器、切换全屏、折叠侧边栏,弹层就“僵住”了。
必须手动监听 window.resize,并在回调里调用 layer.style() 或直接操作 DOM 更新尺寸。不要用 layer.close() + layer.open() 重建,会丢失状态和焦点。
- 用
layer.style(index, {width: '...', height: '...'})最稳妥,index来自layer.open()的返回值 - 别在 resize 回调里频繁调用,加个 100ms 节流(
setTimeout防抖即可) - 如果弹层设置了
maxmin: true(最大化按钮),注意最大化状态下不应再响应窗口 resize —— 要判断layer.getChildFrame().length或记录当前状态
移动端拉伸失效?因为 touch 事件没被接管
原生 Layui 的拉伸手柄基于 mousedown/mousemove,在 iOS 和安卓 Chrome 上无法响应触摸操作。这不是 bug,是设计如此 —— Layui 2.x 从未适配移动端 touch 拖拽。
真要支持,只有两个现实选择:
- 放弃拉伸,改用
area: ['90%', '85%']+maxHeight: '80vh'(需 CSS 辅助)做伪自适应 - 自行 patch
layer.js,把mousedown替换为touchstart并处理touchmove坐标映射(风险高,升级 Layui 会覆盖) - 更推荐:检测
'ontouchstart' in window,如果是移动端,直接禁用resize: false,避免出现不可用的手柄
真正容易被忽略的是:很多人在 PC 端调通后,直接上线,结果测试发现 iPad 上手柄点不动——不是代码问题,是 Layui 根本没考虑这个场景。











