layui 2.8+ 原生支持抽屉效果，需用字符串 anim 值（如 'slideleft'）配合 offset（如 'r'）实现方向匹配，避免关闭动画错乱；area 与 maxwidth 必须共用防宽度失控，且需在真机测试开闭全流程。
直接用 layer.open 配合 offset 和 anim 字符串值就能实现，不需要额外插件或 hack —— 这是 layui 2.8+ 原生支持的抽屉能力，老版本不兼容。
必须用字符串 anim 值（如 'slideLeft'）
Layui 2.8 引入了字符串类型的动画值，专门用于边缘抽屉。如果还沿用数字 anim: 5，虽然能弹出，但关闭时动画方向不匹配，视觉上会“跳一下”或卡顿。
-
offset: 'r'+anim: 'slideLeft'：从右滑入，内容向左推入 -
offset: 'l'+anim: 'slideRight'：从左滑入，内容向右推入 -
offset: 't'+anim: 'slideDown'：从顶滑入 -
offset: 'b'+anim: 'slideUp'：从底滑入
数字动画（0–6）和字符串动画不能混用；一旦用了 offset: 'r'，就该配 anim: 'slideLeft'，否则关闭动画会反向错乱。
area 和 maxWidth 必须配合使用
只设 area: '300px' 在大屏下没问题，但若内容含长文本、表格或自适应容器，area: 'auto' 容易撑爆宽度。这时候 maxWidth 就不是“可选”，而是“必填”。
- 错误写法：
area: 'auto'且没设maxWidth→ 抽屉在 2560px 屏幕上可能宽达 1200px - 推荐写法：
area: 'auto'+maxWidth: 480→ 内容超宽时自动滚动，布局不崩 - 移动端注意：
maxWidth建议设为document.documentElement.clientWidth * 0.9动态计算，避免固定值在小屏上溢出
关闭后 DOM 不销毁？得手动清理
默认情况下，layer.open 关闭抽屉只是隐藏 DOM，不会移除节点。如果抽屉里绑了事件、用了 laydate 或 form.render()，反复打开会重复绑定，导致点击响应多次。
- 用
end回调做清理：end: function(){ $('#your-form')[0].reset(); layui.form.render('select'); } - 避免把
content写成 jQuery 对象引用（如content: $('#drawer-content')），否则关闭后仍保留在页面中；改用 HTML 字符串或克隆副本：content: $('#drawer-content').clone() - 如果内容含 iframe，记得在
end中调用$(layero).find('iframe')[0].contentWindow.close()（视业务而定）
移动端点击遮罩不关闭？检查 shadeClose 和 touch 事件冲突
部分安卓 WebView 或 iOS Safari 下，shadeClose: true 失效，原因常是父容器设置了 touch-action: none 或抽屉内容区域拦截了 touchstart。
- 临时修复：加
skin: 'layui-layer-draw'（Layui 2.8+ 内置抽屉皮肤，已优化 touch 行为） - 更稳妥做法：显式禁用遮罩层的 touch 拦截：
shadeStyle: 'touch-action: manipulation;' - 别依赖
click监听遮罩 —— 移动端优先走touchend，Layui 底层已处理，但前提是遮罩没被其他 CSS 阻断
真正容易被忽略的是 anim 和 offset 的语义耦合：它们不是独立配置项，而是一对“方向契约”。写错一个，抽屉开起来像模像样，关的时候才暴露问题 —— 动画撕裂、定位偏移、甚至触发两次 end 回调。上线前务必在真机上测开+关全流程。
