Bootstrap 5 中按钮 loading 状态需手动实现：必须同时设置 disabled="true"、aria-disabled="true"，替换文本并插入 spinner-border 元素；恢复时移除禁用属性并还原原始文案，且所有操作须在 finally 块中统一处理。
Bootstrap 5 中如何让按钮进入 loading 状态
原生 Bootstrap 不提供 loading 属性或内置的加载中按钮组件，必须手动控制按钮的禁用状态、文字和视觉反馈。最稳妥的做法是用 JavaScript 动态切换 disabled 属性、替换 innerText，并添加 spinner 子元素。
常见错误是只加 spinner 不禁用按钮，导致用户重复点击；或用了 opacity: 0.6 却没设 pointer-events: none，依然可触发事件。
- 务必同时设置
disabled="true"和aria-disabled="true"，确保语义与交互一致 - 推荐使用 Bootstrap 5 内置的
<span class="spinner-border spinner-border-sm"></span>，避免自定义 SVG 尺寸错位 - 文字替换建议用
data-loading-text自定义属性预存文案，方便复用
用纯 JS 实现一个可复用的 LoadingButton 函数
不需要引入额外库，一段轻量函数就能封装通用逻辑。核心是保存原始文本、插入 spinner、阻止重复提交。
示例场景：表单提交按钮点击后显示加载中，请求完成再恢复。
function setLoading(btn, isLoading) {
const originalText = btn.dataset.originalText || btn.innerText;
if (isLoading) {
btn.disabled = true;
btn.setAttribute('aria-disabled', 'true');
btn.dataset.originalText = originalText;
const spinner = document.createElement('span');
spinner.className = 'spinner-border spinner-border-sm me-2';
spinner.setAttribute('role', 'status');
spinner.setAttribute('aria-hidden', 'true');
btn.innerHTML = '';
btn.appendChild(spinner);
btn.appendChild(document.createTextNode(btn.dataset.loadingText || '加载中...'));
} else {
btn.disabled = false;
btn.removeAttribute('aria-disabled');
btn.innerText = originalText;
}
}
-
btn.dataset.loadingText可在 HTML 中提前写好：<button data-loading-text="提交中...">提交</button> - 注意用
innerHTML = ''清空再重插，避免多次点击造成多个 spinner 堆叠 - 若按钮含图标（如
<i class="bi bi-check"></i>），需改用textContent+ 克隆节点方式保留结构
Vue / React 项目里怎么避免重复实现
在框架中不应每次都在 click 回调里手动调用 setLoading，应抽象为指令或 Hook。
Vue 3 的自定义指令示例（v-loading）：
app.directive('loading', {
beforeMount(el, binding) {
el.dataset.loadingText = binding.value.text || '加载中...';
},
updated(el, binding) {
setLoading(el, binding.value.active);
}
});
React 中建议封装为 useLoadingButton Hook：
function useLoadingButton() {
const [loading, setLoading] = useState(false);
const toggleLoading = useCallback((state) => setLoading(state), []);
return { loading, toggleLoading };
}
- Vue 指令要监听
updated钩子，因为active是响应式变量，值变化时需同步 UI - React 中别直接在事件里
setLoading(true)后发请求——异步链断裂时容易忘记关 loading - 所有框架方案都绕不开「请求开始 → 启动 loading → 请求结束 → 关闭 loading」这个三段式流程，漏掉任一环节就会卡死按钮
为什么不能只靠 CSS 类名切换来实现 loading 效果
仅靠添加 .disabled 类或自定义 .btn-loading 类，无法真正阻止点击事件传播，也不满足无障碍要求。
典型问题：
- 用户仍可用回车键或空格键触发按钮（
button元素默认可聚焦且可激活） - 屏幕阅读器不会感知“正在加载”，因为它没收到
aria-disabled="true"或aria-busy="true" - 移动端 touchstart 事件可能穿透，尤其在 fastclick 未关闭时
- CSS 动画 spinner 若用
visibility: hidden替代display: none，仍占布局空间，影响按钮高度一致性
loading 状态的本质是状态同步：DOM 属性、A11Y 属性、视觉呈现、事件响应，四者必须严格一致。少一个，就不是真正的 loading 状态。
