移动端抽屉遮罩需用position:fixed+100vw/100vh并挂载body下，禁用100%宽高；配合no-scroll类和touchmove阻止滚动穿透；遮罩pointer-events:auto、抽屉z-index更高且圆角仅作用于面板。
移动端抽屉从底部滑出时，遮罩层必须覆盖整个可视区域（包括滚动后露出的部分），且不随页面滚动偏移。核心在于遮罩的定位方式、尺寸单位、层级控制和交互拦截——不是加个 div 就完事，稍有偏差就会露底、错位或点击失效。
遮罩必须用 position: fixed + 100vw/100vh
抽屉遮罩不能依赖父容器定位，否则在嵌套结构、transform 容器或 overflow: hidden 环境下极易被截断。正确写法：
- 样式必须包含：
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; - 禁用
width: 100%; height: 100%;—— iOS Safari 中 100% 高度常等于初始视口，滚动后遮罩底部会露白 - 遮罩元素应直接挂载在
下，避开任何带transform、perspective或filter的祖先节点（这些会创建新层叠上下文，使 fixed 失效）
防止底部页面滚动穿透
弹窗打开时，用户滑动抽屉内容到底部再继续拖拽，容易触发底层页面滚动。需双管齐下：
- 给
添加临时类：document.body.classList.add('no-scroll')，对应 CSS：.no-scroll { overflow: hidden; height: 100vh; } - 在遮罩层上监听
touchmove并阻止默认行为：@touchmove.stop.prevent（Vue）或event.preventDefault()（原生），但注意：仅用于遮罩本身，抽屉内容区需保留滚动能力 - 避免对整个弹窗容器加
@touchmove.stop.prevent，否则内部可滚动区域（如长列表）将无法滑动
抽屉内容区与遮罩的交互分层
遮罩要挡背景、不挡抽屉，关键靠 pointer-events 和 z-index 配合：
- 遮罩层设
pointer-events: auto;（默认即可），确保能响应点击关闭 - 抽屉容器（如
.drawer-panel）必须设pointer-events: auto;且z-index高于遮罩（例如遮罩z-index: 999，抽屉z-index: 1000） - 切勿给遮罩加
pointer-events: none，否则点击直接穿透，抽屉按钮点不到，也无法通过点击遮罩关闭
圆角与视觉细节处理
圆角只作用于抽屉面板，绝不能加在遮罩层上：
- 遮罩是全屏覆盖层，加
border-radius会导致四角透出底层页面，观感突兀 - 圆角应加在抽屉内容容器（如
.drawer-content或.drawer-panel）上，通常顶部两个角设border-radius: 16px 16px 0 0 - 若使用低代码平台（如 uView），类名可能带 hash 后缀，建议用开发者工具定位真实容器再加样式
