Vue自定义表单组件需严格区分disabled（完全禁用、不提交）与readonly（可聚焦复制、仍提交），通过props显式接收并透传至原生控件，配合遮罩层实现视觉只读，且在v-model中拦截输入但允许父级更新。
Vue 自定义表单组件实现禁用（disabled）与只读（readonly）状态控制，关键在于区分语义、合理暴露 props，并在内部正确透传或响应。不是简单加个属性就完事，得兼顾表单行为、样式反馈、数据绑定和可访问性。
明确 disabled 和 readonly 的本质区别
disabled：元素完全不可交互，不触发 focus，不参与表单提交，键盘/鼠标事件被拦截，通常灰显且光标禁用；
readonly：内容不可编辑，但可聚焦、可选中、可复制，仍会随表单提交（对 / 有效），视觉上常保持正常色但禁用输入逻辑。
自定义组件需按此语义设计——比如一个封装了 input + 图标 + 校验提示的 CustomInput，不能只把 :disabled="props.disabled" 往里一塞就结束，还要同步处理 tabindex、focus 状态、键盘事件拦截等。
通过 props 显式接收并透传标准属性
推荐在组件 props 中声明 disabled 和 readonly 两个布尔值，并在模板中分别绑定到底层原生控件：
- 对
、类组件，同时支持两者： - 对
、等，仅支持disabled（readonly无效），此时忽略readonly或 warn 提示 - 对外暴露统一 API：
封装遮罩层实现「视觉只读」（适合复杂表单区域）
当需要让整个表单项容器（含标签、输入框、下拉按钮、操作图标）统一进入只读态，且不希望逐个改底层属性时，可用遮罩方案：
- 在组件根元素上添加
position: relative - 动态插入一个全盖层
div，设置pointer-events: none（默认）或pointer-events: auto+cursor: not-allowed - 遮罩仅在
readonly为 true 时显示，disabled仍走原生逻辑（因 disabled 更强） - 注意：遮罩不替代语义属性，必须同时设置
readonly到内部 input，确保辅助技术可识别
配合 v-model 实现受控与非受控一致性
自定义组件若使用 v-model，需确保禁用/只读状态下：
- 不响应用户输入（监听
@input或@change时直接 return） - 不触发
update:modelValue事件 - 但允许父级主动更新
modelValue（即支持「展示历史值但禁止修改」场景） - 示例逻辑：
function handleInput(e) { if (props.disabled || props.readonly) return; emit('update:modelValue', e.target.value); }
不复杂但容易忽略。核心是守住语义边界，再叠加一层封装逻辑，就能让自定义表单既健壮又易用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
