原生可拖拽分割面板可用 resize + flex 实现：父容器设 display: flex 且 overflow: auto，子区域设 flex: 1 和 min-width/min-height，手柄用 ::after 伪元素覆盖交界处并加 aria-label、role="separator" 和 pointerdown 监听。
用 resize + flex 实现原生可拖拽分割面板
不需要第三方库，现代浏览器（Chrome 81+、Firefox 91+、Safari 16.4+）已支持 resize CSS 属性配合 overflow: auto 和 flex 布局实现基础分割。关键不是“怎么画线”，而是“怎么让两个区域响应式缩放且拖拽边界稳定”。
常见错误是直接给 <div> 加 resize: both，但父容器没设 overflow 或没限制最小尺寸，导致拖拽失效或布局崩塌。
- 必须将可拖拽区域设为
overflow: hidden或auto，否则resize不生效 - 父容器用
display: flex，子区域用flex: 1或固定flex-basis，避免浮动干扰 - 拖拽手柄需用
::after伪元素 +position: absolute覆盖在两区域交界处，不能用独立 DOM 节点（否则会触发两次重排） - 设置
min-width/min-height防止拖到 0，例如min-width: 200px
splitpanes 库的最小可用配置踩坑点
如果项目已用 Vue，splitpanes 是最轻量的选择（仅 4KB gzipped），但默认配置下容易出现“拖不动”“回弹”“父子高度不匹配”问题。
核心原因是它依赖父容器有明确高度（不能是 height: auto），且内部使用 transform 移动而非重排，对 position: sticky 或 overflow: clip 元素兼容性差。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
height（如height: calc(100vh - 64px)），不能靠内容撑开 - 禁用
watch-parent-size（默认 true），改用手动调用this.$refs.panes.refresh()在 modal 打开/尺寸变化后触发重计算 - 若子区域含
iframe或canvas，需加resize="none"到对应<pane>，否则拖拽时 iframe 会拦截鼠标事件 - 不要嵌套
<splitpanes>，外层 panes 的 resize 事件不会透传到内层
React 中用 react-split 处理 SSR 和焦点丢失
react-split 在服务端渲染（SSR）场景下默认会报错：「Cannot read properties of null (reading 'ownerDocument')」，因为它在初始化时立即访问 document。另外，拖拽结束后焦点常丢失，对键盘导航不友好。
- 用
dynamic import+ssr: false延迟加载组件，例如：const Split = dynamic(() => import('react-split').then(m => m.default), { ssr: false }) - 给每个
<Split>添加onDragEnd回调，手动 focus 到左侧 pane 的第一个可聚焦元素：onDragEnd={() => document.querySelector('.left-pane [tabindex]')?.focus()} - 避免在
size属性中传字符串（如"30%"），改用数字数组[300, 500]或[0.3, 0.7]，否则 SSR hydration 时会因单位解析失败导致 layout shift - 禁用
expandToMin（默认 true），否则当用户拖小某区域后刷新页面，该区域会自动恢复到minSize，违背用户预期
拖拽手柄的像素级控制与无障碍支持
多数实现把手柄做成 4px 宽灰色条，但实际体验中，4px 对触控设备太窄，对屏幕阅读器不可见，且鼠标 hover 无反馈。这不是 UI 细节问题，而是交互链断裂点。
- 手柄真实宽度至少设为
8px，用cursor: col-resize（横向）或row-resize（纵向），并加user-select: none - 添加
aria-label="Resize left panel"到手柄容器，并用role="separator"告知屏幕阅读器这是可调整边界 - 监听
pointerdown而非mousedown，兼容触控笔和触摸屏；同时阻止默认行为：event.preventDefault(); event.target.setPointerCapture(event.pointerId);
- 拖拽过程中实时更新
style.left或flex-basis，避免 requestAnimationFrame 节流过猛（建议 8ms 间隔），否则快速拖拽会出现卡顿感
拖拽分割的本质不是“画一条线”，是维护两个容器的尺寸约束关系。最易忽略的是：手柄的 pointer capture 是否释放、resize 后是否触发 resize observer 清理、以及移动端 touch-action 是否被意外禁用。这些点不处理，用户在 iPad 上一拖就整个页面滑动。
