dialog 的 close 事件仅在调用 close("value") 时携带 returnValue，点击遮罩或按 Esc 时始终为空字符串；需手动提取表单数据并序列化后传入 close()，且不可用 remove() 或 open=false 替代。
dialog 元素的 close 事件监听方式
原生 关闭时会触发 close 事件，但这个事件本身不携带表单数据——它只在用户点击遮罩、按 Esc 或调用 close() 时触发。你必须在触发关闭前手动设置 returnValue，否则事件对象的 returnValue 始终为空字符串。
如何正确设置和读取 returnValue
returnValue 不是事件属性，而是 元素自身的属性（HTMLDialogElement.returnValue），必须在调用 close() 前赋值。浏览器不会自动把表单字段塞进去，得你自己提取并写入。
- 调用
dialog.close("your-data")才会让event.returnValue变成"your-data" - 直接点击 backdrop 或按 Esc 触发的
close事件，event.returnValue永远是空字符串（""） - 如果用
showModal()打开，close()是唯一能传值的退出方式；close()之后再读dialog.returnValue也能拿到，但推荐统一从事件里取
const dialog = document.querySelector('dialog');
const form = dialog.querySelector('form');
dialog.addEventListener('close', (e) => {
console.log(e.returnValue); // 仅当 close("xxx") 被调用时才有值
});
form.addEventListener('submit', (e) => {
e.preventDefault();
const data = new FormData(form);
// 必须手动序列化，例如转成对象或 JSON 字符串
const result = Object.fromEntries(data.entries());
dialog.close(JSON.stringify(result)); // ← 关键：在这里传值
});
表单数据传递的常见陷阱
很多人误以为 会像 prompt() 那样自动收集输入，其实完全不会。容易踩的坑包括：
- 没调用
close()，而是靠remove()或 CSS 隐藏，导致close事件根本不触发 - 用
dialog.open = false关闭——这是无效操作，不会触发事件，也不会设returnValue - 传了对象但没序列化：
dialog.close({a: 1})会变成"[object Object]"，必须JSON.stringify或手动拼接 - 多个提交按钮（如“确认”“取消”）共用一个
submit事件，却没区分按钮值，结果所有操作都走同一套逻辑
取消按钮怎么传不同值
取消操作也需要显式调用 close() 并传值，否则无法区分是确认还是取消。建议用按钮的 value 或 data-action 控制返回内容：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<button type="button" onclick="dialog.close('cancel')">取消</button>
<button type="submit">确认</button>
然后在 submit 处理器里做表单校验和数据组装，再调用 dialog.close(...)。别依赖按钮的 value 直接当返回值——表单可能有多个字段，需要完整上下文。
真正麻烦的是异步验证（比如检查用户名是否可用）：必须等 Promise 完结后再调用 close()，不能在 submit 回调里直接关。这时候 returnValue 的时机控制就很容易出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
