dialog 元素本身不支持拖动调整大小，需通过 CSS 的 resize: both 实现原生缩放或手动监听指针事件动态修改宽高样式。
dialog 元素本身不支持拖动调整大小
<dialog> 是语义化模态对话框标签，浏览器原生实现仅提供 showModal()、close() 和基础样式控制（如 width、height），**没有内置拖拽缩放逻辑**。想实现“拖动条控制大小”，本质是手动监听鼠标/触摸事件 + 动态修改 style.width / style.height，和 <dialog> 标签本身无关——它只是个容器。
用 resize: both 触发浏览器原生调整大小（最简方案）
如果只需用户能拉边框缩放，不用写 JS，直接给 <dialog> 加 CSS 即可：
dialog {
resize: both;
overflow: auto;
min-width: 300px;
min-height: 200px;
}注意三点：
- 必须设置
overflow（非visible），否则resize不生效 - 用户只能拖右下角，不能指定方向；Chrome/Firefox 支持，Safari 对
<dialog>的resize兼容性不稳定（建议加display: block强制） - 缩放后尺寸不会自动保存，刷新即重置
手动实现拖拽调整大小（兼容性 & 精确控制）
更可靠的方式是：在 <dialog> 内部加一个自定义拖拽条（比如右下角小方块），绑定 mousedown → mousemove → mouseup 流程。关键点：
立即学习“前端免费学习笔记（深入）”；
- 拖拽时需用
setPointerCapture()防止鼠标移出丢失事件 - 计算位移要基于
clientX/clientY，而非pageX/pageY（避免滚动影响） - 限制最小宽高，防止缩到看不见：
Math.max(newWidth, 300) - 记得在
mouseup或mouseleave时调用releasePointerCapture()
示例片段（仅核心逻辑）：
const resizer = dialog.querySelector('.resizer');
resizer.addEventListener('pointerdown', e => {
e.target.setPointerCapture(e.pointerId);
const startX = e.clientX, startY = e.clientY;
const startWidth = parseInt(getComputedStyle(dialog).width), startHeight = parseInt(getComputedStyle(dialog).height);
<p>const move = e => {
const newWidth = startWidth + (e.clientX - startX);
const newHeight = startHeight + (e.clientY - startY);
dialog.style.width = Math.max(newWidth, 300) + 'px';
dialog.style.height = Math.max(newHeight, 200) + 'px';
};</p><p>const up = () => {
e.target.releasePointerCapture(e.pointerId);
document.removeEventListener('pointermove', move);
document.removeEventListener('pointerup', up);
};</p><p>document.addEventListener('pointermove', move);
document.addEventListener('pointerup', up);
});dialog 拖拽缩放时容易忽略的坑
实际落地时，这几个问题常被跳过导致行为异常：
-
<dialog>默认是display: none，JS 操作前必须先showModal()或show()，否则getComputedStyle()读不到尺寸 - 若 dialog 含
transform（如动画入场），直接改width/height可能视觉错位，优先用scale+transform-origin替代 - 移动端需同时监听
touchstart/touchmove/touchend，且注意preventDefault()阻止页面滚动 - 无障碍方面：拖拽条应有
role="application"和键盘焦点支持（Tab进入后用Arrow键微调），但原生resize无此能力
真正难的不是拖拽逻辑，而是让缩放后的尺寸在不同设备、不同缩放比例、不同 zoom 级别下保持稳定 —— 建议优先用 CSS resize 快速验证，再按需补 JS 控制。
