多态按钮采用css自定义属性+transition+语义化class驱动状态变化，用data-state替代class切换，分离disabled与业务状态，确保可预测、可复用、无障碍。
多态按钮不是靠 JavaScript 拼 class 字符串硬切状态，而是用 CSS 自定义属性 + transition + 语义化 class 驱动视觉变化，让「加载中」「成功」「失败」等状态真正可预测、可复用、不耦合 DOM 结构。
button 的 type 属性决定默认行为，别乱设 type="button"
很多同学一上来就写 <button type="button"></button>，以为这样最“安全”。其实它切断了表单原生机制：比如在 <form></form> 里按回车，type="submit" 才会触发提交；type="reset" 才能清空字段。若你真需要禁用默认行为，用 event.preventDefault() 更可控。否则，该是 submit 就写 submit，浏览器会自动处理表单验证、焦点管理、无障碍语义。
-
type="submit"是表单内按钮的默认值，不写也生效，但显式声明更清晰 -
type="button"仅适用于纯 JS 控制的交互（如模态框开关、切换 tabs），且必须配合onclick或事件监听 -
type="reset"会重置所有同级<input>值为初始值，慎用 —— 多数场景用 JS 清空更可控
用 --state 自定义属性替代 class 切换
传统做法是 btn.classList.add('btn-loading')，但 class 越来越多，维护成本高，还容易冲突。换成 CSS 变量驱动更干净：
button[data-state="loading"] {
--bg: #909090;
--text: #fff;
--cursor: wait;
}
button[data-state="success"] {
--bg: #4caf50;
--text: #fff;
--cursor: default;
}
button {
background-color: var(--bg, #2196f3);
color: var(--text, #fff);
cursor: var(--cursor, pointer);
transition: background-color 0.2s, color 0.2s;
}
- 只用一个 class（如
class="btn"），所有状态靠data-state控制，避免 class 名爆炸 -
data-state是 HTML 标准属性，比自定义data-更语义化，也方便用 CSS 属性选择器定位 - 注意 fallback 值：如
var(--bg, #2196f3)，防止变量未设置时样式崩塌
transition 不要只写 all，锁定关键属性
写 transition: all 0.3s 看似省事，但会意外动画化 box-shadow、border-width 甚至 outline，造成卡顿或布局抖动。明确列出要过渡的属性：
- 必锁：
background-color、color、transform、opacity - 慎用：
box-shadow（体积大，重绘开销高），可用filter: drop-shadow()替代 - 禁用：
width/height（触发布局重排）、display（无法过渡） - 移动端记得加
will-change: transform提前提示 GPU 加速（仅对频繁动画元素）
disabled 状态必须和 data-state 分离处理
disabled 是原生禁用状态，会自动屏蔽点击、失去焦点、被屏幕阅读器忽略。但它和「加载中」不是一回事：data-state="loading" 是业务状态，仍需保留键盘焦点、支持 screen reader announce（比如用 aria-busy="true"）。两者要正交控制：
- 禁用按钮：同时设
disabled属性 +data-state="disabled"（用于样式） - 加载中按钮：不设
disabled，但加aria-busy="true"和aria-disabled="true"（语义上禁用交互，但保焦点） - CSS 中用
button:disabled和button[data-state="disabled"]分别定义样式，避免覆盖
真正难的不是写出多个状态样式，而是让状态变更可推导、可测试、不依赖 DOM 操作顺序。把 data-state 当作唯一真相源，CSS 负责映射，JS 只负责更新它 —— 这才是多态按钮落地的关键约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
