hidden属性不能单独用于加载中按钮，因其不提供过渡、不保留布局占位、不表达“忙”语义；应配合disabled、css动画、aria-busy等机制协同实现优雅状态切换。
hidden 属性在按钮上直接写 hidden 就生效，但“优雅”不等于“写上就完事”
按钮加载中状态本质是「临时不可用 + 视觉反馈缺失」，hidden 确实能立刻移除渲染、跳过焦点和表单提交，但它本身不提供过渡、不保留布局占位、也不表达“正在忙”的语义。直接写 <button hidden>提交</button> 会导致用户看到按钮突然消失，甚至误以为操作没响应。
真正优雅的关键在于：用 hidden 做最终开关，但把过渡、占位、可访问性提示交给其他机制配合。
- 按钮初始必须可见，否则无法点击触发加载 —— 所以不能服务端直出
hidden，除非你同时控制 JS hydration 同步 - 加载开始时，先禁用按钮（
el.disabled = true），再设el.hidden = true；否则用户可能在隐藏动画期间反复点击 - 若需保持按钮位置（比如防止下方内容上跳），得额外加
style="visibility: hidden; position: absolute; left: -9999px"这类兜底 —— 但注意：hidden本身不保留占位，它和visibility: hidden行为不同
为什么 el.hidden = false 后按钮仍不显示？常见三类干扰源
JS 设置 el.hidden = false 后按钮没回来，不是代码错了，而是被其他层覆盖了。最常踩的坑有三个：
-
el.style.display === 'none'：之前用style.display = 'none'隐藏过，hidden = false不会自动清内联样式 —— 必须手动重置：el.style.display = '' - CSS 强制覆盖：
[hidden] { display: block !important; }或button[hidden] { opacity: 1 !important; }这类规则会绕过hidden的默认行为，直接让元素露出来 - 表单上下文干扰：如果按钮是
<form></form>内的<button type="submit"></button>，且父 form 有novalidate或自定义 submit 处理，hidden切换后可能未触发重新绑定事件监听器
加载按钮需要过渡动画？hidden 本身不支持，但可以组合实现
hidden 是布尔开关，没有中间态，所以不能直接 transition: hidden 0.2s。要加淡入/滑出效果，得靠 CSS 类 + hidden 协同：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 先加过渡类：
el.classList.add('is-loading')，对应 CSS 定义.is-loading { opacity: 0; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s; } - 等动画结束（可用
el.addEventListener('transitionend', ...)），再设el.hidden = true - 显示时反向操作：先
el.hidden = false，再el.classList.remove('is-loading')，让浏览器重绘后再触发动画 - 别忘了屏幕阅读器提示：加载中按钮应加
aria-busy="true"和aria-live="polite"，hidden会让整个按钮退出可访问性树，所以加载中状态更适合用aria-disabled+aria-busy而非直接hidden
表单提交场景下，千万别对提交按钮用 hidden
如果按钮是 <button type="submit"></button>，且你用 el.hidden = true 隐藏它，那整个表单将失去默认提交入口 —— 用户按回车或调用 form.submit() 都不会触发。这不是 bug，是规范行为：hidden 元素不参与表单交互流。
更稳妥的做法是保留按钮 DOM 结构，仅视觉隐藏并禁用：
- 用
el.setAttribute('aria-hidden', 'true')配合el.disabled = true，再加style="opacity: 0.5; pointer-events: none;" - 或用辅助技术友好类：
class="sr-only"（仅对屏幕阅读器可见）+disabled，确保键盘和读屏用户都清楚当前状态 - 若必须用
hidden，请确保你有备用提交方式（如自动调用form.requestSubmit()或显式 FormData 构造）
复杂点在于：hidden 看似简单，但一旦混入表单、动画、SSR、可访问性多层约束，它就不再是“写个属性就完事”的开关 —— 它是个语义断言，得和其他机制商量着用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
