QInput组件用于捕获来自用户的文本输入。 它使用v-model，类似于常规输入。 它支持错误和验证，并具有多种样式，颜色和类型。
QInput API
设计
WARNING
对于您的QInput，您只能使用一种主要设计（filled, outlined, standout, borderless）。 您不能使用多个，因为它们是专有的。
着色
标准
实心
轮廓
突出
QToolbar中最适合用于突出设计的用例之一：
无边界
borderless设计使您可以将QInput无缝集成到其他组件中，而无需QInput在其周围绘制边框或更改其背景颜色：
圆形设计
如以下示例所示，rounded属性仅可与实心、轮廓和突出设计一起使用：
方形边框
如以下示例所示，square属性仅可与实心、轮廓和突出设计一起使用：
黑暗背景
基本特性
原生属性
所有在QInput上设置的，不在API的props列表中的属性都将传递到原生字段（input或textarea）。 例如：autocomplete、 placeholder。
请检查以下资源以获取有关原生属性的更多信息（对于输入，还请检查每种类型的特定属性）：
可清除
作为辅助，您可以使用clearable属性，以便用户可以通过附加的图标将模型重置为null。 在下面的示例中，第二个QInput相当于使用clearable。
WARNING
不会与v-model管理的输入修改器一起工作，如.trim，因为在这种情况下，Vue不处理null值。
输入类型
以下QInput使用type属性来在其内部渲染原生等效的<input type="...">。
WARNING
支持和行为完全是浏览器渲染页面的主题，而不是Quasar的核心代码。
TIP
某些输入类型（如date或time）总是渲染某些控件，因此，如果您使用的是label，则可能需要将其与stack-label一起设置，否则标签将与原生浏览器控件重叠。
输入数字类型
您将使用v-model.number（注意number修饰符）和type="number"属性：
输入文件类型
WARNING
当QInput为type="file"时，请勿使用v-model。 浏览器安全策略不允许将值设置到此类输入。 结果，您只能读取它（附加一个@update:model-value事件），而不能编写它。
文本区域
当您需要QInput与其内容一起增长时，请使用autogrow属性，如下例所示：
前缀和后缀
标签自定义
使用label槽可以自定义标签的方位或添加特殊功能如QTooltip。
TIP
别忘了设置label-slot属性。
如果要与标签（QTooltip）的内容交互，请在插槽中的元素上添加all-pointer-events类。
阴影文本
QBtn类型为“submit”的插槽
WARNING
当将类型为“submit”的QBtn放置在QField、QInput或QSelect的“before”、“after”、“prepend”或“append”插槽之一中时，您还应该在有问题的QBtn上添加@click侦听器。 该侦听器应调用提交表单的方法。 此类插槽中的所有“点击”事件均不会传播到其父元素。
去抖模式
当您观看模型并对其进行耗性能的操作时，去抖作用有时会发生。 因此，您想先让用户输入内容，然后再触发模型更新，而不是在每次击键时都更新模型。
加载状态
掩码
您可以在mask属性的帮助下强制/帮助用户输入特定格式。
WARNING
仅当type是“text”（默认），“search”，“url”，“tel”或“password”之一时，掩码才可用。
以下是掩码令牌：
| 令牌 | 描述 |
|---|---|
# | 数字 |
S | 字母，a到z，不区分大小写 |
N | 字母数字，不区分大小写 |
A | 字母，转换为大写 |
a | 字母，转换为小写 |
X | 字母数字，字母转换为大写 |
x | 字母数字，字母转换为小写 |
QInput mask属性有辅助器：完整列表。 为了方便起见，可以使用它们（例如：“phone”、“card”）或写出指定您的自定义需求的字符串。
例如，如果您想强制用户键入某种格式，但是希望模型包含原始值，则unmasked-value非常有用：
如果要强制用户从头开始填充掩码并允许输入的长度不固定，则reverse-fill-mask很有用：
使用第三方掩码处理器
通过对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
}
验证
内部验证
您可以使用:rulegs属性来验证QInput组件。 指定嵌入式规则数组或您自己的验证器。 您的自定义验证器将是一个函数，如果验证器成功，它将返回true，否则将返回带有错误消息的String。
TIP
默认情况下，由于性能原因，规则的更改在模型更改之前不会触发新的验证。为了在规则发生变化时触发验证，请使用reactive-rules布尔属性。缺点是性能下降（所以在你真正需要的时候使用它！）。通过使用计算属性作为规则的值（而不是在vue模板中内联指定它们），可以稍微减轻这种情况。
这样，您就可以编写方便的形状规则，例如：
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，规则也可以是异步的。
TIP
考虑将异步规则与debounce属性结合使用，以避免在每次击键时立即调用异步规则，这可能会对性能造成不利影响。
外部验证
您还可以使用外部验证，并且仅传递error和error-message（启用bottom-slots以显示此错误消息）。
TIP
根据您的需要，您可以将Vuelidate（我们推荐的方法）或其他一些验证库连接到QInput。
您还可以自定义错误消息的插槽：
原生表单提交
当处理具有action和method的原生形式时（例如，使用Quasar和ASP.NET控制器），则需要在QInput上指定name属性，否则formData将不包含它（如果应该的话）：