el-button/button置灰及原理
el.setAttribute(‘disabled’, ‘true’) 为什么能让按钮“置灰”？
从浏览器原理和框架实现两个角度来拆解：
✅ 一、浏览器原生行为解释
1️⃣ disabled 是表单控件的标准属性
对于 button、input、select 等原生表单元素，disabled 是 HTML 标准定义的布尔属性。
👉 效果：
• 被禁用，无法点击
• 会变“灰色”（这是浏览器内置样式）
• 不会被提交表单
• 不响应事件（如 click）
✅ el.setAttribute(‘disabled’, ‘true’) 的作用：
这是等效于写 button disabled的写法，虽然它的值是字符串 “true”，但只要 disabled 这个属性存在，浏览器就认为它为 true。
disabled 是一个布尔属性，它的“存在”即代表为 true，值写什么不重要。
⸻
✅ 二、在 UI 框架（如 Element Plus）中的行为
❓ 如果你操作的是 el-button 这样的组件，不是原生 ，为什么仍然能置灰？
这是因为：
• Element Plus 内部会把 disabled 属性透传给实际渲染的原生 button标签
• 并配套加上了 .is-disabled 类名，用于自定义样式（例如不同颜色）
👉 所以我们手动加上：
el.setAttribute(‘disabled’, ‘true’)
el.classList.add(‘is-disabled’) // Element Plus 用于视觉置灰
可以兼容原生按钮和组件按钮的视觉置灰与功能禁用。
⸻
✅ 三、推荐使用方式（两种都加）
function setDisabled(el: HTMLElement) {el.setAttribute('disabled', 'true') // 原生行为（防点）el.classList.add('is-disabled') // 视觉置灰（框架样式）el.style.pointerEvents = 'none' // 防止部分组件仍响应点击el.style.cursor = 'not-allowed' // 改变鼠标样式为禁用
}
✅ 总结
方法 是否置灰 是否禁用点击
el.setAttribute(‘disabled’) ✅ ✅
el.classList.add(‘is-disabled’) ✅（仅样式） ❌（仍能点）
同时使用两者 ✅ ✅（推荐）
自定义指令让按钮置灰，是发生在转译（编译）前还是编译后？
✅ 答案：是发生在“转译/编译后”，即 DOM 渲染完成后。
⸻
✅ 一句话总结：
自定义指令是在组件模板渲染完毕、DOM 已生成后才执行的，属于运行时行为，不会影响编译（模板转 AST -> 虚拟 DOM）的过程。
⸻
🔍 详细解释
- 编译前 / 转译前：
• Vue 编译器把 .vue 模板语法（比如 ）转成虚拟 DOM（VNode）结构。
• 这时候，Vue 只是识别你用了 v-disabled，它会在渲染时为你注册这个指令。
⚠️ 在这个阶段，指令不会执行，不会影响 DOM。
⸻
- 编译后（也叫挂载后）：
• DOM 渲染完成（或更新）后，Vue 会调用你注册的指令钩子（如 mounted、updated）。
• 你在这些钩子里拿到的是真实的 DOM 元素，可以设置属性、样式、添加事件监听器等。
• 这时你设置 el.disabled = true 或添加 .is-disabled 样式才真正生效。
⸻
🧪 举个例子
提交
在 Vue 的编译阶段，这个模板会被转成 VNode，记录：
{tag: 'el-button',props: {directives: [{ name: 'disabled', value: !hasPermission }]}
}
然后 Vue 在渲染 DOM 后调用你的指令函数（比如 mounted(el, binding)），这时候你才真正操作 DOM：
el.disabled = true;
el.classList.add(‘is-disabled’);
⸻
✅ 小结
阶段 是否执行指令 是否能置灰
编译前 ❌ 不会执行 ❌ 不能置灰
编译后（挂载/更新） ✅ 执行指令 ✅ 可以置灰
⸻
如果你希望按钮在“初始渲染前”就已经是灰的（比如 SSR 场景），那就不建议用指令，而是直接用 :disabled=“true” 靠组件本身逻辑控制。