PrimeVue InputText 组件完全指南基础用法、表单集成、无障碍与主题定制【免费下载链接】primevueNext Generation Vue UI Component Library项目地址: https://gitcode.com/GitHub_Trending/pr/primevuePrimeVue 的 InputText 是对原生input元素的功能扩展核心价值在于无缝接入 PrimeVue 主题系统、表单校验体系Forms与设计令牌Design Tokens。本文将围绕 apps/showcase/server/assets/llms/components/inputtext.md 的完整脉络从导入方式、双向绑定、状态变体、标签布局到表单校验、无障碍支持与源码级实现原理逐一深入帮助你掌握在生产项目中正确使用与定制 InputText 的完整能力。组件简介与导入InputText 是一个轻封装组件它渲染原生input元素因此原生 HTML 属性如type、placeholder、maxlength、readonly全部可以直接透传同时额外获得 PrimeVue 的主题化theming能力。import InputText from primevue/inputtext;从源码结构看InputText 的实现非常精简其完整渲染逻辑位于 packages/primevue/src/inputtext/InputText.vueinput typetext :classcx(root) :valued_value :namename :disableddisabled :aria-invalid$invalid || undefined :data-pdataP inputonInput v-bindattrs /关键设计点包括:valued_value与inputonInput共同实现v-model双向绑定onInput内部调用writeValue(event.target.value, event)向上抛出update:modelValue事件inheritAttrs: false配合v-bindattrs使未声明为 prop 的原生属性自动落到根input上:aria-invalid$invalid || undefined让校验失败状态自动反映到无障碍树中data-p上根据invalid、fluid、filled、size组合生成状态标记。BaseInputTextpackages/primevue/src/inputtext/BaseInputText.vue进一步继承自primevue/core/baseinput并注入$pcInputText供子组件与主题系统读取。对应测试 packages/primevue/src/inputtext/InputText.spec.js 验证了三个核心行为渲染结果包含.p-inputtext.p-component根类、modelValue被正确回显到input.value、触发input事件时发出update:modelValue载荷。基础用法v-model 双向绑定InputText 通过v-model实现双向值绑定这是最基础也最常用的场景InputText typetext v-modelvalue /modelValue的类型为Nullablestring即字符串或null详见 packages/primevue/src/inputtext/InputText.d.ts。除update:modelValue外组件还支持非受控模式下的value-change事件。当你使用选项式 API 时直接在data中声明值即可script export default { data() { return { value: null }; } }; /script状态变体Disabled、Filled 与 Invalid禁用态Disabled当disabled存在时元素不可编辑也不可聚焦同时根元素会获得p-disabled相关样式InputText v-modelvalue disabled placeholderDisabled /填充态Filledvariantfilled提供比默认 outlined 更高的视觉强调度常用于表单密度较高的界面InputText typetext v-modelvalue variantfilled /该变体在源码中被映射为p-variant-filled类见 packages/primevue/src/inputtext/style/InputTextStyle.js其variant属性类型为HintedStringoutlined | filled默认值为null即跟随主题默认外观。校验失败态Invalid当集成第三方校验库或 PrimeVue Forms 时可用invalid属性手动触发失败样式例如必填但为空的场景InputText v-modelvalue1 :invalid!value1 placeholderName / InputText v-modelvalue2 :invalid!value2 variantfilled placeholderName /invalid的默认值为false一旦为true根元素会追加p-invalid类同时自动设置原生aria-invalidtrue保证视觉状态与无障碍状态一致。尺寸规格SizesInputText 在基础尺寸之外提供small与large两种替代规格InputText v-modelvalue1 typetext sizesmall placeholderSmall / InputText v-modelvalue2 typetext placeholderNormal / InputText v-modelvalue3 typetext sizelarge placeholderLarge /size属性在样式层会追加p-inputtext-sm p-inputfield-smsmall或p-inputtext-lg p-inputfield-lglarge类其字体大小与内边距由对应设计令牌控制见下文 Theming 小节中的inputtext.sm.*与inputtext.lg.*令牌。注意InputTextProps在扩展InputHTMLAttributes时显式排除了原生size属性以避免与组件自身的size语义冲突。标签布局Float Label 与 Ifta LabelFloatLabel浮动标签FloatLabel将标签与输入框视觉整合标签在聚焦或填充时浮动到边框之上。它支持三种variantFloatLabel InputText idover_label v-modelvalue1 / label forover_labelOver Label/label /FloatLabel FloatLabel variantin InputText idin_label v-modelvalue2 variantfilled / label forin_labelIn Label/label /FloatLabel FloatLabel varianton InputText idon_label v-modelvalue3 / label foron_labelOn Label/label /FloatLabel三种变体含义分别为over默认标签覆盖在输入框上、in标签嵌入填充背景内、on标签悬浮在输入框上沿。关于 FloatLabel 的完整文档见 apps/showcase/server/assets/llms/components/floatlabel.md。IftaLabel顶对齐标签IftaLabel用于创建输入框内部顶部对齐的标签通常配合filled变体使用IftaLabel InputText idusername v-modelvalue variantfilled / label forusernameUsername/label /IftaLabelIftaLabel 与 FloatLabel 的核心区别在于标签的最终位置IftaLabel 标签固定于输入框内部顶端FloatLabel 标签则在聚焦/填充时浮动。可参考 apps/showcase/server/assets/llms/components/iftalabel.md。布局辅助Fluid 与 Help TextFluid满宽fluid为true时组件占满容器 100% 宽度InputText typetext v-modelvalue fluid /在源码中fluid会触发根元素追加p-inputtext-fluid类见 InputTextStyle.js。此外 PrimeVue 还提供独立的Fluid布局组件可为容器内所有表单组件统一开启满宽模式详见 apps/showcase/server/assets/llms/components/fluid.md。Help Text辅助说明文本借助Message组件可在输入框下方展示辅助或提示文案并通过aria-describedby建立无障碍关联div classflex flex-col gap-2 label forusernameUsername/label InputText idusername v-modelvalue aria-describedbyusername-help / Message sizesmall severitysecondary variantsimpleEnter your username to reset your password./Message /div与 PrimeVue Forms 无缝集成InputText 与 PrimeVue Forms 库深度集成通过name属性注册字段配合Form的resolver与initialValues完成声明式校验并借助$form插槽作用域读取字段状态、展示错误信息Form v-slot$form :resolverresolver :initialValuesinitialValues submitonFormSubmit classflex justify-center flex-col gap-4 div classflex flex-col gap-1 InputText nameusername typetext placeholderUsername / Message v-if$form.username?.invalid severityerror sizesmall variantsimple{{ $form.username.error?.message }}/Message /div div classflex flex-col gap-1 InputText nameemail typetext placeholderEmail / Message v-if$form.email?.invalid severityerror sizesmall variantsimple{{ $form.email.error?.message }}/Message /div Button typesubmit severitysecondary labelSubmit / /Form使用 Composition API 时可结合 Zod 校验器构建完整表单template div classcard flex justify-center Form v-slot$form :resolverresolver :initialValuesinitialValues submitonFormSubmit classflex flex-col gap-4 w-full sm:w-56 div classflex flex-col gap-1 InputText nameusername typetext placeholderUsername fluid / Message v-if$form.username?.invalid severityerror sizesmall variantsimple{{ $form.username.error?.message }}/Message /div div classflex flex-col gap-1 InputText nameemail typetext placeholderEmail fluid / Message v-if$form.email?.invalid severityerror sizesmall variantsimple{{ $form.email.error?.message }}/Message /div Button typesubmit severitysecondary labelSubmit / /Form /div /template script setup import { ref } from vue; import { zodResolver } from primevue/forms/resolvers/zod; import { useToast } from primevue/usetoast; import { z } from zod; const toast useToast(); const initialValues ref({ username: , email: }); const resolver ref(zodResolver( z.object({ username: z.string().min(1, { message: Username is required. }), email: z.string().min(1, { message: Email is required. }).email({ message: Invalid email address. }) }) )); const onFormSubmit ({ valid }) { if (valid) { toast.add({ severity: success, summary: Form is submitted., life: 3000 }); } }; /script底层原理方面InputText 在计算attrs时会通过mergeProps(this.ptmi(root, ...), this.formField)合并表单字段上下文BaseInput负责把formControl与 Forms 状态绑定当表单标记字段无效时$invalid自动为真根元素随即呈现p-invalid状态。Forms 完整能力Form、FormField、useForm及各类 resolver见 packages/forms/src 与 apps/showcase/server/assets/llms/pages/forms.md。无障碍AccessibilityInputText 渲染的是原生input元素因此原生可访问性能力默认保留所有透传 prop 都会隐式作用于该元素。描述输入框含义有三种等价方式label标签 id属性、aria-labelledby属性、aria-label属性label forfirstnameFirstname/label InputText idfirstname / span idlastnameLastname/span InputText aria-labelledbylastname / InputText aria-labelAge /键盘支持方面tab键将焦点移入输入框。此外当invalid为真时组件会自动输出aria-invalidtrue配合aria-describedby关联的辅助文案如 Message 提示屏幕阅读器可完整读出错误或帮助信息。对应演示文档见 apps/showcase/doc/inputtext/AccessibilityDoc.vue项目级的无障碍规范参见 apps/showcase/server/assets/llms/pages/accessibility.md。Props 总览下表整理 InputText 的核心 Props。由于组件继承所有原生InputHTMLAttributes完整的aria-*系列属性、on*事件处理器onInput、onFocus、onBlur、onKeydown等及class/style均可直接使用此处重点列出组件自身扩展的属性名称类型默认值描述modelValueNullablestring-组件值受控模式defaultValueNullablestring-非受控模式下的默认值namestring-元素name属性用于表单提交sizenull \| HintedStringsmall \| largenull组件尺寸规格invalidnull \| booleanfalse为真时呈现校验失败状态样式variantnull \| HintedStringoutlined \| fillednull输入框外观变体fluidnull \| booleannull为真时占满容器 100% 宽度formControlRecordstring, any-表单控制对象用于校验与表单状态处理dtany-通过设计令牌生成组件级 scoped CSS 变量ptPassThroughInputTextPassThroughOptions-向组件内部 DOM 元素传递属性ptOptionsany-配置 passthrough(pt) 选项unstyledbooleanfalse启用后移除核心样式无样式模式其余原生属性如placeholder、maxlength、minlength、pattern、readonly、required、autocomplete、inputmode、autofocus、type等均按标准 HTML 语义透传完整定义见 InputText.d.ts。Pass Through 选项通过pt属性可精确控制组件根元素的行为名称类型描述rootInputTextPassThroughOptionTypeT向根元素原生input传递属性hooksany管理组件全部生命周期钩子pt既支持静态属性对象也支持函数形式——函数会收到包含instance、props、context、parent、global的上下文参数。其中context提供filled与disabled两个布尔状态见 InputText.d.ts可用于实现按状态区分的条件透传。关于pt/ptOptions的完整体系参考 apps/showcase/server/assets/llms/pages/passthrough.md 与 apps/showcase/doc/inputtext/pt/index.vue。ThemingCSS 类与设计令牌CSS 类InputText 根元素的类名为p-inputtext见 packages/primevue/src/inputtext/style/InputTextStyle.d.ts。根据状态不同样式层还会追加条件类p-filled当前有输入值时p-inputtext-sm p-inputfield-sm/p-inputtext-lg p-inputfield-lgsize为 small / largep-invalidinvalid为真p-variant-filledvariantfilledp-inputtext-fluidfluid为真这些映射逻辑集中在 packages/primevue/src/inputtext/style/InputTextStyle.js 的classes.root中。设计令牌Design TokensInputText 的样式完全由设计令牌驱动每个令牌对应一个--p-inputtext-*CSS 变量可在主题中全局或局部覆盖TokenCSS 变量描述inputtext.background--p-inputtext-background根元素背景inputtext.disabled.background--p-inputtext-disabled-background禁用态背景inputtext.filled.background--p-inputtext-filled-background填充变体背景inputtext.filled.hover.background--p-inputtext-filled-hover-background填充变体悬停背景inputtext.filled.focus.background--p-inputtext-filled-focus-background填充变体聚焦背景inputtext.border.color--p-inputtext-border-color边框颜色inputtext.hover.border.color--p-inputtext-hover-border-color悬停边框颜色inputtext.focus.border.color--p-inputtext-focus-border-color聚焦边框颜色inputtext.invalid.border.color--p-inputtext-invalid-border-color校验失败边框颜色inputtext.color--p-inputtext-color文字颜色inputtext.disabled.color--p-inputtext-disabled-color禁用态文字颜色inputtext.placeholder.color--p-inputtext-placeholder-color占位符颜色inputtext.invalid.placeholder.color--p-inputtext-invalid-placeholder-color校验失败占位符颜色inputtext.shadow--p-inputtext-shadow阴影inputtext.padding.x--p-inputtext-padding-x水平内边距inputtext.padding.y--p-inputtext-padding-y垂直内边距inputtext.border.radius--p-inputtext-border-radius圆角inputtext.focus.ring.width--p-inputtext-focus-ring-width聚焦环宽度inputtext.focus.ring.style--p-inputtext-focus-ring-style聚焦环样式inputtext.focus.ring.color--p-inputtext-focus-ring-color聚焦环颜色inputtext.focus.ring.offset--p-inputtext-focus-ring-offset聚焦环偏移inputtext.focus.ring.shadow--p-inputtext-focus-ring-shadow聚焦环阴影inputtext.transition.duration--p-inputtext-transition-duration过渡动画时长inputtext.sm.font.size--p-inputtext-sm-font-sizesmall 字号inputtext.sm.padding.x--p-inputtext-sm-padding-xsmall 水平内边距inputtext.sm.padding.y--p-inputtext-sm-padding-ysmall 垂直内边距inputtext.lg.font.size--p-inputtext-lg-font-sizelarge 字号inputtext.lg.padding.x--p-inputtext-lg-padding-xlarge 水平内边距inputtext.lg.padding.y--p-inputtext-lg-padding-ylarge 垂直内边距各预设主题Aura、Lara、Material、Nora 等均在 packages/themes/src/presets 下为 InputText 提供了对应的令牌实现如 aura/inputtext。若启用unstyled模式组件将移除全部核心样式完全交由开发者通过 Tailwind 或自定义 CSS 控制相关实践见 apps/showcase/server/assets/llms/pages/unstyled.md 与 apps/showcase/doc/inputtext/theming/TailwindDoc.vue。小结InputText 虽是一个轻量组件却完整覆盖了表单输入的高频需求v-model双向绑定、禁用/填充/校验失败等状态变体、大小规格、FloatLabel/IftaLabel 标签布局、Fluid 满宽、Help Text 提示以及与 PrimeVue Forms 的声明式校验集成。源码层面它通过继承BaseInput、透传原生属性、data-p状态标记与设计令牌机制在保持原生语义的同时深度融入主题体系——无论你使用的是默认预设主题、自研设计令牌还是unstyled Tailwind 方案都能以一致的方式获得风格统一且可无障碍访问的输入控件。【免费下载链接】primevueNext Generation Vue UI Component Library项目地址: https://gitcode.com/GitHub_Trending/pr/primevue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 PrimeVue InputText 组件完全指南：基础用法、表单集成、无障碍与主题定制
PrimeVue InputText 组件完全指南基础用法、表单集成、无障碍与主题定制【免费下载链接】primevueNext Generation Vue UI Component Library项目地址: https://gitcode.com/GitHub_Trending/pr/primevuePrimeVue 的 InputText 是对原生input元素的功能扩展核心价值在于无缝接入 PrimeVue 主题系统、表单校验体系Forms与设计令牌Design Tokens。本文将围绕 apps/showcase/server/assets/llms/components/inputtext.md 的完整脉络从导入方式、双向绑定、状态变体、标签布局到表单校验、无障碍支持与源码级实现原理逐一深入帮助你掌握在生产项目中正确使用与定制 InputText 的完整能力。组件简介与导入InputText 是一个轻封装组件它渲染原生input元素因此原生 HTML 属性如type、placeholder、maxlength、readonly全部可以直接透传同时额外获得 PrimeVue 的主题化theming能力。import InputText from primevue/inputtext;从源码结构看InputText 的实现非常精简其完整渲染逻辑位于 packages/primevue/src/inputtext/InputText.vueinput typetext :classcx(root) :valued_value :namename :disableddisabled :aria-invalid$invalid || undefined :data-pdataP inputonInput v-bindattrs /关键设计点包括:valued_value与inputonInput共同实现v-model双向绑定onInput内部调用writeValue(event.target.value, event)向上抛出update:modelValue事件inheritAttrs: false配合v-bindattrs使未声明为 prop 的原生属性自动落到根input上:aria-invalid$invalid || undefined让校验失败状态自动反映到无障碍树中data-p上根据invalid、fluid、filled、size组合生成状态标记。BaseInputTextpackages/primevue/src/inputtext/BaseInputText.vue进一步继承自primevue/core/baseinput并注入$pcInputText供子组件与主题系统读取。对应测试 packages/primevue/src/inputtext/InputText.spec.js 验证了三个核心行为渲染结果包含.p-inputtext.p-component根类、modelValue被正确回显到input.value、触发input事件时发出update:modelValue载荷。基础用法v-model 双向绑定InputText 通过v-model实现双向值绑定这是最基础也最常用的场景InputText typetext v-modelvalue /modelValue的类型为Nullablestring即字符串或null详见 packages/primevue/src/inputtext/InputText.d.ts。除update:modelValue外组件还支持非受控模式下的value-change事件。当你使用选项式 API 时直接在data中声明值即可script export default { data() { return { value: null }; } }; /script状态变体Disabled、Filled 与 Invalid禁用态Disabled当disabled存在时元素不可编辑也不可聚焦同时根元素会获得p-disabled相关样式InputText v-modelvalue disabled placeholderDisabled /填充态Filledvariantfilled提供比默认 outlined 更高的视觉强调度常用于表单密度较高的界面InputText typetext v-modelvalue variantfilled /该变体在源码中被映射为p-variant-filled类见 packages/primevue/src/inputtext/style/InputTextStyle.js其variant属性类型为HintedStringoutlined | filled默认值为null即跟随主题默认外观。校验失败态Invalid当集成第三方校验库或 PrimeVue Forms 时可用invalid属性手动触发失败样式例如必填但为空的场景InputText v-modelvalue1 :invalid!value1 placeholderName / InputText v-modelvalue2 :invalid!value2 variantfilled placeholderName /invalid的默认值为false一旦为true根元素会追加p-invalid类同时自动设置原生aria-invalidtrue保证视觉状态与无障碍状态一致。尺寸规格SizesInputText 在基础尺寸之外提供small与large两种替代规格InputText v-modelvalue1 typetext sizesmall placeholderSmall / InputText v-modelvalue2 typetext placeholderNormal / InputText v-modelvalue3 typetext sizelarge placeholderLarge /size属性在样式层会追加p-inputtext-sm p-inputfield-smsmall或p-inputtext-lg p-inputfield-lglarge类其字体大小与内边距由对应设计令牌控制见下文 Theming 小节中的inputtext.sm.*与inputtext.lg.*令牌。注意InputTextProps在扩展InputHTMLAttributes时显式排除了原生size属性以避免与组件自身的size语义冲突。标签布局Float Label 与 Ifta LabelFloatLabel浮动标签FloatLabel将标签与输入框视觉整合标签在聚焦或填充时浮动到边框之上。它支持三种variantFloatLabel InputText idover_label v-modelvalue1 / label forover_labelOver Label/label /FloatLabel FloatLabel variantin InputText idin_label v-modelvalue2 variantfilled / label forin_labelIn Label/label /FloatLabel FloatLabel varianton InputText idon_label v-modelvalue3 / label foron_labelOn Label/label /FloatLabel三种变体含义分别为over默认标签覆盖在输入框上、in标签嵌入填充背景内、on标签悬浮在输入框上沿。关于 FloatLabel 的完整文档见 apps/showcase/server/assets/llms/components/floatlabel.md。IftaLabel顶对齐标签IftaLabel用于创建输入框内部顶部对齐的标签通常配合filled变体使用IftaLabel InputText idusername v-modelvalue variantfilled / label forusernameUsername/label /IftaLabelIftaLabel 与 FloatLabel 的核心区别在于标签的最终位置IftaLabel 标签固定于输入框内部顶端FloatLabel 标签则在聚焦/填充时浮动。可参考 apps/showcase/server/assets/llms/components/iftalabel.md。布局辅助Fluid 与 Help TextFluid满宽fluid为true时组件占满容器 100% 宽度InputText typetext v-modelvalue fluid /在源码中fluid会触发根元素追加p-inputtext-fluid类见 InputTextStyle.js。此外 PrimeVue 还提供独立的Fluid布局组件可为容器内所有表单组件统一开启满宽模式详见 apps/showcase/server/assets/llms/components/fluid.md。Help Text辅助说明文本借助Message组件可在输入框下方展示辅助或提示文案并通过aria-describedby建立无障碍关联div classflex flex-col gap-2 label forusernameUsername/label InputText idusername v-modelvalue aria-describedbyusername-help / Message sizesmall severitysecondary variantsimpleEnter your username to reset your password./Message /div与 PrimeVue Forms 无缝集成InputText 与 PrimeVue Forms 库深度集成通过name属性注册字段配合Form的resolver与initialValues完成声明式校验并借助$form插槽作用域读取字段状态、展示错误信息Form v-slot$form :resolverresolver :initialValuesinitialValues submitonFormSubmit classflex justify-center flex-col gap-4 div classflex flex-col gap-1 InputText nameusername typetext placeholderUsername / Message v-if$form.username?.invalid severityerror sizesmall variantsimple{{ $form.username.error?.message }}/Message /div div classflex flex-col gap-1 InputText nameemail typetext placeholderEmail / Message v-if$form.email?.invalid severityerror sizesmall variantsimple{{ $form.email.error?.message }}/Message /div Button typesubmit severitysecondary labelSubmit / /Form使用 Composition API 时可结合 Zod 校验器构建完整表单template div classcard flex justify-center Form v-slot$form :resolverresolver :initialValuesinitialValues submitonFormSubmit classflex flex-col gap-4 w-full sm:w-56 div classflex flex-col gap-1 InputText nameusername typetext placeholderUsername fluid / Message v-if$form.username?.invalid severityerror sizesmall variantsimple{{ $form.username.error?.message }}/Message /div div classflex flex-col gap-1 InputText nameemail typetext placeholderEmail fluid / Message v-if$form.email?.invalid severityerror sizesmall variantsimple{{ $form.email.error?.message }}/Message /div Button typesubmit severitysecondary labelSubmit / /Form /div /template script setup import { ref } from vue; import { zodResolver } from primevue/forms/resolvers/zod; import { useToast } from primevue/usetoast; import { z } from zod; const toast useToast(); const initialValues ref({ username: , email: }); const resolver ref(zodResolver( z.object({ username: z.string().min(1, { message: Username is required. }), email: z.string().min(1, { message: Email is required. }).email({ message: Invalid email address. }) }) )); const onFormSubmit ({ valid }) { if (valid) { toast.add({ severity: success, summary: Form is submitted., life: 3000 }); } }; /script底层原理方面InputText 在计算attrs时会通过mergeProps(this.ptmi(root, ...), this.formField)合并表单字段上下文BaseInput负责把formControl与 Forms 状态绑定当表单标记字段无效时$invalid自动为真根元素随即呈现p-invalid状态。Forms 完整能力Form、FormField、useForm及各类 resolver见 packages/forms/src 与 apps/showcase/server/assets/llms/pages/forms.md。无障碍AccessibilityInputText 渲染的是原生input元素因此原生可访问性能力默认保留所有透传 prop 都会隐式作用于该元素。描述输入框含义有三种等价方式label标签 id属性、aria-labelledby属性、aria-label属性label forfirstnameFirstname/label InputText idfirstname / span idlastnameLastname/span InputText aria-labelledbylastname / InputText aria-labelAge /键盘支持方面tab键将焦点移入输入框。此外当invalid为真时组件会自动输出aria-invalidtrue配合aria-describedby关联的辅助文案如 Message 提示屏幕阅读器可完整读出错误或帮助信息。对应演示文档见 apps/showcase/doc/inputtext/AccessibilityDoc.vue项目级的无障碍规范参见 apps/showcase/server/assets/llms/pages/accessibility.md。Props 总览下表整理 InputText 的核心 Props。由于组件继承所有原生InputHTMLAttributes完整的aria-*系列属性、on*事件处理器onInput、onFocus、onBlur、onKeydown等及class/style均可直接使用此处重点列出组件自身扩展的属性名称类型默认值描述modelValueNullablestring-组件值受控模式defaultValueNullablestring-非受控模式下的默认值namestring-元素name属性用于表单提交sizenull \| HintedStringsmall \| largenull组件尺寸规格invalidnull \| booleanfalse为真时呈现校验失败状态样式variantnull \| HintedStringoutlined \| fillednull输入框外观变体fluidnull \| booleannull为真时占满容器 100% 宽度formControlRecordstring, any-表单控制对象用于校验与表单状态处理dtany-通过设计令牌生成组件级 scoped CSS 变量ptPassThroughInputTextPassThroughOptions-向组件内部 DOM 元素传递属性ptOptionsany-配置 passthrough(pt) 选项unstyledbooleanfalse启用后移除核心样式无样式模式其余原生属性如placeholder、maxlength、minlength、pattern、readonly、required、autocomplete、inputmode、autofocus、type等均按标准 HTML 语义透传完整定义见 InputText.d.ts。Pass Through 选项通过pt属性可精确控制组件根元素的行为名称类型描述rootInputTextPassThroughOptionTypeT向根元素原生input传递属性hooksany管理组件全部生命周期钩子pt既支持静态属性对象也支持函数形式——函数会收到包含instance、props、context、parent、global的上下文参数。其中context提供filled与disabled两个布尔状态见 InputText.d.ts可用于实现按状态区分的条件透传。关于pt/ptOptions的完整体系参考 apps/showcase/server/assets/llms/pages/passthrough.md 与 apps/showcase/doc/inputtext/pt/index.vue。ThemingCSS 类与设计令牌CSS 类InputText 根元素的类名为p-inputtext见 packages/primevue/src/inputtext/style/InputTextStyle.d.ts。根据状态不同样式层还会追加条件类p-filled当前有输入值时p-inputtext-sm p-inputfield-sm/p-inputtext-lg p-inputfield-lgsize为 small / largep-invalidinvalid为真p-variant-filledvariantfilledp-inputtext-fluidfluid为真这些映射逻辑集中在 packages/primevue/src/inputtext/style/InputTextStyle.js 的classes.root中。设计令牌Design TokensInputText 的样式完全由设计令牌驱动每个令牌对应一个--p-inputtext-*CSS 变量可在主题中全局或局部覆盖TokenCSS 变量描述inputtext.background--p-inputtext-background根元素背景inputtext.disabled.background--p-inputtext-disabled-background禁用态背景inputtext.filled.background--p-inputtext-filled-background填充变体背景inputtext.filled.hover.background--p-inputtext-filled-hover-background填充变体悬停背景inputtext.filled.focus.background--p-inputtext-filled-focus-background填充变体聚焦背景inputtext.border.color--p-inputtext-border-color边框颜色inputtext.hover.border.color--p-inputtext-hover-border-color悬停边框颜色inputtext.focus.border.color--p-inputtext-focus-border-color聚焦边框颜色inputtext.invalid.border.color--p-inputtext-invalid-border-color校验失败边框颜色inputtext.color--p-inputtext-color文字颜色inputtext.disabled.color--p-inputtext-disabled-color禁用态文字颜色inputtext.placeholder.color--p-inputtext-placeholder-color占位符颜色inputtext.invalid.placeholder.color--p-inputtext-invalid-placeholder-color校验失败占位符颜色inputtext.shadow--p-inputtext-shadow阴影inputtext.padding.x--p-inputtext-padding-x水平内边距inputtext.padding.y--p-inputtext-padding-y垂直内边距inputtext.border.radius--p-inputtext-border-radius圆角inputtext.focus.ring.width--p-inputtext-focus-ring-width聚焦环宽度inputtext.focus.ring.style--p-inputtext-focus-ring-style聚焦环样式inputtext.focus.ring.color--p-inputtext-focus-ring-color聚焦环颜色inputtext.focus.ring.offset--p-inputtext-focus-ring-offset聚焦环偏移inputtext.focus.ring.shadow--p-inputtext-focus-ring-shadow聚焦环阴影inputtext.transition.duration--p-inputtext-transition-duration过渡动画时长inputtext.sm.font.size--p-inputtext-sm-font-sizesmall 字号inputtext.sm.padding.x--p-inputtext-sm-padding-xsmall 水平内边距inputtext.sm.padding.y--p-inputtext-sm-padding-ysmall 垂直内边距inputtext.lg.font.size--p-inputtext-lg-font-sizelarge 字号inputtext.lg.padding.x--p-inputtext-lg-padding-xlarge 水平内边距inputtext.lg.padding.y--p-inputtext-lg-padding-ylarge 垂直内边距各预设主题Aura、Lara、Material、Nora 等均在 packages/themes/src/presets 下为 InputText 提供了对应的令牌实现如 aura/inputtext。若启用unstyled模式组件将移除全部核心样式完全交由开发者通过 Tailwind 或自定义 CSS 控制相关实践见 apps/showcase/server/assets/llms/pages/unstyled.md 与 apps/showcase/doc/inputtext/theming/TailwindDoc.vue。小结InputText 虽是一个轻量组件却完整覆盖了表单输入的高频需求v-model双向绑定、禁用/填充/校验失败等状态变体、大小规格、FloatLabel/IftaLabel 标签布局、Fluid 满宽、Help Text 提示以及与 PrimeVue Forms 的声明式校验集成。源码层面它通过继承BaseInput、透传原生属性、data-p状态标记与设计令牌机制在保持原生语义的同时深度融入主题体系——无论你使用的是默认预设主题、自研设计令牌还是unstyled Tailwind 方案都能以一致的方式获得风格统一且可无障碍访问的输入控件。【免费下载链接】primevueNext Generation Vue UI Component Library项目地址: https://gitcode.com/GitHub_Trending/pr/primevue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考