Layui弹出层layer.open如何实现右侧抽屉式弹出效果-Layui教程-PHP中文网

layer.open 设置右侧抽屉式弹出需组合 offset: 'r'、area: ['320px', '100%']、anim: -1，并在 success 回调中添加自定义类，配合 css 设置 right: 0、transform: translatex() 动画及 overflow 处理。

layer.open 怎么设置右侧抽屉式弹出？

直接用 layer.open 默认不支持抽屉式（即从右向左滑入、遮罩层半透明、内容区固定宽度），必须手动覆盖 css + 控制动画方向。layui 本身只提供 type: 1（页面层）和 anim: 5（右左滑入）的组合，但 anim: 5 是全屏滑入，不是“窄抽屉”，需额外干预。

anim: 5 只控制入场动画方向，不改变尺寸或定位，弹层仍居中、宽高自适应
抽屉效果本质是：固定宽度（如 320px）、右边界贴边、transform: translateX(100%) → translateX(0)
必须配合 area 和自定义 style 才能生效，不能只靠 anim

关键参数组合与 CSS 覆盖写法

核心是禁用默认居中逻辑，用 position: fixed + right: 0 锚定右侧，再用 transition 配合 transform 实现滑入。Layui 的 content 容器需要被重置样式。

area 设为固定宽高，例如 ['320px', '100%']，避免内容撑开
offset 改为 'r'（Layui v2.8+ 支持），会自动加 right: 0；老版本需手动加 style
anim: -1 关闭内置动画，自己用 CSS 控制，否则 anim: 5 和自定义 transform 冲突
通过 success 回调给弹层加 class，再写 CSS 规则，避免污染全局

layer.open({
  type: 1,
  title: false,
  closeBtn: false,
  shade: 0.3,
  anim: -1,
  offset: 'r',
  area: ['320px', '100%'],
  content: $('#drawer-content'),
  success: function(layero) {
    layero.addClass('layui-layer-drawer');
  }
});

必须写的配套 CSS（否则无效）

Layui 不提供抽屉专用类，所有位移、过渡、遮罩行为都要自己补全。尤其注意 z-index 层级和 overflow 处理，否则滚动异常或被遮挡。

layui手机车牌号码键盘代码

layui手机车牌号码键盘代码是一款基于jQuery跟layui制作的手机端车牌号码输入弹出键盘选择，支持新能源汽车车牌输入格式代码。

下载

.layui-layer-drawer 要设 right: 0、top: 0、height: 100%，并关闭 border-radius
内部 .layui-layer-content 需设 overflow-y: auto，不然内容溢出不可滚动
遮罩层 .layui-layer-shade 默认 z-index: 19891014，抽屉至少设 z-index: 19891015
动画用 transform: translateX()，别用 right，性能更好且兼容性稳

.layui-layer-drawer {
  top: 0 !important;
  right: 0 !important;
  width: 320px !important;
  height: 100% !important;
  border-radius: 0 !important;
  z-index: 19891015 !important;
  animation: drawerIn 0.3s ease-out forwards;
}
@keyframes drawerIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.layui-layer-drawer .layui-layer-content {
  overflow-y: auto;
  height: calc(100% - 40px);
}