查看 Demo 源码

加载中…

抽屉

弹窗抽屉侧边栏滑入弹层

AI 改造

亮点解析

侧边滑入 — 面板从屏幕侧边 translateX(100%) → 0 滑入，0.3s ease-out，遮罩半透明压暗原页面但不跳转，操作完即回到原上下文
多种收起方式 — 点遮罩、点关闭按钮、点“应用”按钮均可收起；正式页面中打开时应锁定 body 滚动防止背景滚动穿透
向 AI 精准描述 — 描述四要素：组件名称（抽屉 Drawer）、内容类型（筛选表单/设置项）、展开方向（从右侧滑入）、收起方式（点遮罩或关闭按钮）

适用场景

筛选器
设置面板
详情侧栏
购物车侧栏

来源

https://mp.weixin.qq.com/s/Jav2CP1zO31pfUBHHbL1yA