QInput 组件用于捕获用户的文本输入。它使用 v-model，类似于常规输入框。它支持错误提示和表单验证，并提供多种样式、颜色和类型供选择。
设计
QInput 只能使用一种主要设计风格（filled、outlined、standout、borderless），不能同时使用多种，因为它们是互斥的。
颜色
Standard（标准样式）
Filled（填充样式）
Outlined（轮廓样式）
Standout（凸显样式）
Standout 设计最典型的使用场景之一是在 QToolbar 中：
Borderless（无边框样式）
borderless 设计可以让 QInput 无缝融入其他组件，不会绘制边框或改变背景色：
圆角设计
rounded 属性仅在 Filled、Outlined 和 Standout 设计下生效，如下方示例所示：
直角边框
square 属性仅在 Filled、Outlined 和 Standout 设计下有意义，如下方示例所示：
强制深色模式
基础功能
原生属性
所有设置在 QInput 上但不在 API 中 props 列表里的属性，都会被透传到原生元素（input 或 textarea）上。例如：autocomplete、placeholder 等。
请参考以下资源了解更多原生属性（对于 input 还需注意每种 type 的特有属性）：
可清除
使用 clearable 属性可以让用户通过一个附加图标将 model 数据重置为 null。下方示例中第二个 QInput 的效果等价于使用 clearable。
输入类型
以下 QInput 使用 type 属性来渲染对应的原生 <input type="..."> 元素。
具体的支持情况和行为完全取决于渲染页面的浏览器，而非 Quasar 的核心代码。
某些输入类型（如 date 或 time）会始终显示浏览器原生控件，因此如果您使用了 label，建议同时设置 stack-label，否则标签会与浏览器原生控件重叠。
数字类型输入
使用 v-model.number（注意 number 修饰符）配合 type="number" 属性：
文件类型输入
当 QInput 的 type="file" 时，不要使用 v-model。浏览器安全策略不允许为此类输入设置值。因此，您只能读取它（通过监听 @update:model-value 事件），而不能写入。
文本域
文本域的行间距跟随其字体大小，因此通过 input-class 或 input-style 给原生字段设置更大或更小的字体时，行距会保持均匀。
当您需要 QInput 随内容自动增高时，可以使用 autogrow 属性：
前缀和后缀
自定义标签
通过 label 插槽，您可以自定义标签的外观或添加特殊功能，如 QTooltip。
别忘了设置 label-slot 属性。
如果您想与标签中的内容（如 QTooltip）进行交互，请在插槽内的元素上添加 all-pointer-events CSS 类。
阴影文字
在插槽中使用 type=“submit” 的 QBtn
当在 QField、QInput 或 QSelect 的 “before”、“after”、“prepend” 或 “append” 插槽中放置 type=“submit” 的 QBtn 时，您还应该在该 QBtn 上添加 @click 监听器，并在监听器中调用提交表单的方法。因为这些插槽中的 “click” 事件不会冒泡到父元素。
model 防抖
防抖的作用在于：当您监听 model 数据并执行开销较大的操作时，可以让用户先输入完毕再触发 model 更新，而不是每次按键都更新。
加载状态
输入掩码
您可以通过 mask 属性来强制或引导用户按照特定格式输入。
掩码仅在 type 为 ‘text’（默认）、‘search’、‘url’、‘tel’ 或 ‘password’ 时可用。
掩码本身就通过其插槽位限制了输入长度，因此不应将其与 maxlength 属性组合使用。原生的 maxlength 计算的是整个显示值（包括字面字符和填充字符），所以任何低于完整掩码长度的值都会过早阻止输入。使用 fill-mask 时显示值始终为掩码的完整长度，这样的 maxlength 会完全锁死输入框。
以下是默认的掩码标记。如需自定义标记，请参阅下一节。
| 标记 | 描述 |
|---|---|
# | 数字 |
S | 字母（a-z），不区分大小写 |
N | 字母或数字，字母不区分大小写 |
A | 字母，自动转为大写 |
a | 字母，自动转为小写 |
X | 字母或数字，字母自动转为大写 |
x | 字母或数字，字母自动转为小写 |
QInput 的 mask 属性有一些内置辅助格式：完整列表。您可以直接使用它们（例如：“phone”、“card”），也可以编写自定义的掩码字符串。
unmasked-value 在以下场景非常有用：比如您希望强制用户按照特定格式输入，但 model 数据中保存的是原始值（不含掩码字符）：
reverse-fill-mask 在以下场景非常有用：您希望用户从末尾开始填充掩码，并允许输入长度不固定：
多重掩码
当一个输入框需要接受多种格式时（例如带 8 位或 9 位本地号码的电话号码），可以将 mask 绑定到一个根据值长度选择格式的计算属性上。两个细节让这个模式可靠：使用 unmasked-value，这样纯数字计数驱动决策，而不受当前掩码字面字符的影响；并且让较短的掩码在末尾多留一个标记位，这样跨越阈值的那个数字才能被键入——一旦输入到位，计算属性就切换掩码并重新排列值，光标保持原位。
自定义掩码标记 v2.18.4+
您还可以在默认标记的基础上定义自定义掩码标记，甚至覆盖部分或全部默认标记。
自定义掩码标记的语法必须与默认标记一致。请注意，transform 属性是可选的。
使用第三方掩码处理器
您可以通过少量调整轻松将任何第三方掩码处理器与 QInput 配合使用。
假设您有这样一个 QInput：
<q-input
filled
v-model="price"
label="Price with 2 decimals"
mask="#.##"
fill-mask="#"
reverse-fill-mask
hint="Mask: #.00"
input-class="text-right"
/>可以使用 v-money 指令：
<q-field filled v-model="price" label="Price with v-money directive" hint="Mask: $ #,###.00 #">
<template v-slot:control="{ id, floatingLabel, modelValue, emitValue }">
<input
:id="id"
class="q-field__input text-right"
:value="modelValue"
@change="e => emitValue(e.target.value)"
v-money="moneyFormatForDirective"
v-show="floatingLabel"
/>
</template>
</q-field>moneyFormatForDirective: {
decimal: '.',
thousands: ',',
prefix: '$ ',
suffix: ' #',
precision: 2,
masked: false /* doesn't work with directive */
}或者使用 money 组件：
<q-field filled v-model="price" label="Price with v-money component" hint="Mask: $ #,###.00 #">
<template v-slot:control="{ id, floatingLabel, modelValue, emitValue }">
<money
:id="id"
class="q-field__input text-right"
:model-value="modelValue"
@update:model-value="emitValue"
v-bind="moneyFormatForComponent"
v-show="floatingLabel"
/>
</template>
</q-field>moneyFormatForComponent: {
decimal: '.',
thousands: ',',
prefix: '$ ',
suffix: ' #',
precision: 2,
masked: true
}验证
内部验证
您可以通过 :rules 属性来验证 QInput 组件。可以指定内置规则数组或自定义验证函数。自定义验证函数需要在验证通过时返回 true，验证失败时返回包含错误信息的 String。
出于性能考虑，默认情况下 rules 的变化不会触发重新验证，只有 model 数据变化时才会。如果您需要在 rules 变化时也触发验证，可以使用 reactive-rules 布尔属性。但这会带来一定的性能开销（因此请仅在确实需要时使用），可以通过将 rules 定义为计算属性（而非在模板中内联）来稍微缓解性能影响。
这样您就可以使用如下简洁的规则写法：
(value) => condition || errorMessage;例如：
(value) => value.includes("Hello") || "Field must contain word Hello";您可以通过调用 QInput 上的 resetValidation() 方法来重置验证状态。
QInput 的 rules 属性有一些内置辅助规则：完整列表。您可以直接使用它们（例如：“date”、“time”、“hexColor”、“rgbOrRgbaColor”、“anyColor”），也可以编写自定义规则。
如果设置了 lazy-rules，验证将在首次失焦后才开始。如果将 lazy-rules 设置为 ondemand 字符串，则仅在手动调用组件的 validate() 方法或外层 QForm 提交时才会触发验证。
异步规则
规则也支持异步，可以使用 async/await 或直接返回 Promise。如果在异步验证进行期间值发生了变化或字段失焦，字段会在异步验证完成后重新验证，确保显示的结果始终匹配当前值。
建议将异步规则与 debounce 属性搭配使用，避免每次按键都立即调用异步规则，这可能会影响性能。
外部验证
您也可以使用外部验证，只需传入 error 和 error-message 属性即可（需启用 bottom-slots 来显示错误信息）。
根据您的需求，可以将 Regle（我们推荐的方案）或其他验证库与 QInput 集成使用。
您还可以自定义错误信息的插槽：
无障碍 v2.25+
QInput 在 QField 框架内渲染原生的 <input>（或 <textarea>），因此 QField 的无障碍章节 中描述的所有内容都适用于此：通过生成的 SSR 安全 id 实现标签关联，错误信息通过 role="alert" 通告并通过 aria-invalid/aria-errormessage/aria-describedby 从控件引用，以及可键盘操作的清除按钮。
label 属性还会作为 aria-label 暴露在原生元素上——你自行设置的 aria-label 或 aria-labelledby 属性优先级更高——同时 disable 和 readonly 映射为原生的 disabled 和 readonly 属性。其他原生属性（placeholder、autocomplete、inputmode 等）也会透传到原生元素上。
原生表单提交
当处理带有 action 和 method 的原生表单时（例如将 Quasar 与 ASP.NET 控制器一起使用），您需要在 QInput 上指定 name 属性，否则 formData 将不会包含该字段的数据：