Layui 2.8 并未新增抽屉组件，所谓“全新抽屉”实为误传；官方 layer 模块自1.x起就支持 offset 参数（如 offset: 'r'）实现抽屉效果，配合 type: 1 和 area 即可，无需额外引入或升级。
layui 2.8 没有“全新的抽屉组件”，所谓 drawer 组件是误传；官方 layer 模块的 offset 参数早就能实现抽屉效果，无需额外引入或升级。
layer.open 的 offset 参数就是抽屉的核心
很多人以为 Layui 2.8 新增了独立的 drawer 组件，其实只是把已有的 layer.open 配合 offset 用得更熟了。这个能力从 Layui 1.x 就存在，2.8 并未新增 API。
-
offset: 'r'表示从右侧滑出，offset: 'l'是左侧，'t'和'b'分别对应顶部和底部 -
area控制宽度（横向）或高度（纵向），比如area: '300px'或area: '80%' -
type: 1是必须的，表示自定义内容层；用type: 2（iframe）或type: 3（加载动画）无法触发抽屉动效 - 不要写
skin: 'drawer'—— Layui 官方没有这个 skin 值，写了也无效
常见错误：把第三方插件当官方功能
你看到的“Layui 抽屉插件”大概率是社区封装的扩展，比如基于 layer 二次包装的 layui.drawer 或独立 JS 文件。这些不是 Layui 官方模块，不会随 layui.js 自动加载，也不受 layui.use 管理。
- 直接在 HTML 中写
<div class="layui-drawer">不会自动初始化，Layui 不识别该类名 - 若用了未声明的模块名（如
layui.use(['drawer'], ...)），控制台静默报错：Cannot find module "drawer" - 第三方抽屉插件通常要求手动引入 JS/CSS，且与
layer的zIndex、shade冲突，导致遮罩不跟随、关闭异常
如何让抽屉支持路由跳转和动态内容
纯 content: '字符串' 不够灵活，真实项目需要加载页面片段或绑定 Vue/React 子应用。这时得靠 success 回调 + 手动 DOM 操作：
- 用
content: $('#drawer-content').html()复用已有模板，避免重复请求 - 在
success回调里初始化表单、表格等子模块：layui.form.render(); layui.table.init('my-table'); - 点击菜单项后，用
location.hash = '#/user/list'或history.pushState同步 URL，但注意layer不监听 hash 变化，需自行绑定window.onhashchange - 若抽屉内嵌 iframe，
area必须设为固定值（如'400px'），百分比在 iframe 场景下容易塌陷
IE11 兼容性和动效细节
Layui 的抽屉动效本质是 CSS transform + transition，IE11 支持良好，但有两个易忽略点：
-
offset: 'r'在 IE11 下若父容器overflow: hidden，抽屉可能被截断——需确保 body 或最近的 layout 容器无隐藏溢出 - 默认动效时长是 0.3s，无法通过参数修改；如需更慢/更快，只能覆盖 CSS：
.layui-layer-page .layui-layer-content { transition-duration: 0.5s !important; } -
shadeClose: true在移动端容易误触，建议搭配shade: 0.3控制透明度，避免遮罩太重影响背后操作
真正要小心的是：别在 layer.open 里传入未渲染的 DOM 节点（比如 display:none 的 div），Layui 会读取其 clientWidth/clientHeight 为 0，导致 area 计算失败、抽屉一闪而过。先 show 再 open，或者用字符串 content 更稳妥。
