data-* 属性传参需用小写短横线命名（如 data-user-id），值恒为字符串，结构化数据须 json 序列化，敏感信息严禁存放；弹窗回填须等 dom 挂载后操作表单元素 value，避免 reset() 清空；iframe 与 url 弹窗参数获取方式不同，关闭前应校验并保留输入。
data-* 属性怎么安全传参给弹窗
必须用小写字母加短横线命名，比如 data-user-id、data-modal-type，不能写 data-userId 或 data_USER_ID。浏览器会把 data-user-id 自动映射成 dataset.userId，但这个映射只处理纯字母，遇到数字或下划线就断掉——data-2024-id 无法通过 dataset.2024Id 读取，得改用 getAttribute('data-2024-id')。
值永远是字符串：data-active="true" 读出来是 "true"，不是布尔值；data-count="42" 是 "42"，不是数字。要做判断时别写 if (btn.dataset.active)，它对 "false" 也返回 true；应写 btn.dataset.active === "true"。要转数字，用 +btn.getAttribute('data-count') 比 parseInt() 更稳妥，避免截断单位（如 "42px"）。
- 结构化数据（如对象）必须先
JSON.stringify()再塞进属性，比如data-config='{"timeout":5000,"retry":3}' - 读取时包
try/catch：const config = JSON.parse(btn.getAttribute('data-config') || '{}') - 敏感信息（token、密钥）严禁放
data-*，HTML 源码可见，毫无保密性
弹窗打开时如何把 data 值回填到表单
关键不是“怎么传”，而是“什么时候读、往哪写”。常见错误是弹窗 DOM 还没挂载完就去操作 input，或者用 form.reset() 清空了刚回填的内容。
- 确保弹窗容器已插入 document 后再赋值，不要在
innerHTML = template后立刻操作 input - 用
form.elements.name.value = btn.dataset.name，别依赖form.dataset（表单元素本身没有 dataset） - input 必须带
name属性，否则new FormData(form)拿不到值；id 只用于定位，不参与数据序列化 - 编辑场景下，关闭弹窗只设
display: none，不remove()，下次打开复用同一节点，避免反复创建销毁开销
iframe 弹窗和 URL 弹窗获取参数的区别
两种弹窗的参数读取方式完全不同，混用必出错。iframe 子页面调用 admin.getLayerData() 就能拿到父页传的整个 data 对象；URL 方式（比如 admin.open({content: 'edit.html'})）则必须用 admin.getLayerData('#anyId')，且 #anyId 得是弹窗内真实存在的元素 ID——这个 ID 不是父页按钮的，是子页自己的。
-
data参数必须是对象，data: {id: 123, name: '张三'}才行；data: '123'或data: 123会导致putLayerData失效 - 子页修改参数后调用
admin.putLayerData('formOk', true)，父页用admin.getLayerData(index, 'formOk')判断是否刷新列表 - URL 弹窗里若没写任何 ID 元素，
admin.getLayerData('#xx')会返回 undefined，务必提前检查
为什么点遮罩或 Esc 关闭后数据丢了
因为默认行为是销毁 DOM 或重置表单，而不是隐藏。用户没点“确定”不等于放弃编辑，更可能是想查资料、切窗口、接电话——直接清空等于强制丢弃输入中内容。
- 关闭前加轻量校验：
if (!form.checkValidity() && !confirm('未保存，确定要关闭？')) return - 禁用
form.reset()，改用form.querySelectorAll('input,select,textarea').forEach(el => el.value = '')（仅用于新建场景） - 如果用了 UIkit，注意
bgclose和escClose默认为 true，需显式设bgclose: false防误触 - 最易忽略的是：弹窗内按钮没加
type="button"，导致点击时触发表单 submit，默认刷新页面
真正难的不是把值塞进 data-*，而是让这些字符串在不同生命周期里被正确解析、写入、读取、保留。DOM 节点一销毁，所有 dataset 就归零；类型一搞错，"0" 和 0 就变成两个世界。别指望框架自动桥接，每一步都得手动兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
