QInput 组件用于捕获用户的文本输入。它使用 v-model，类似于常规输入。它支持错误和验证，并提供各种样式、颜色和类型。

设计

着色

标准

填充

轮廓

突出

突出显示设计的最佳用例之一是在 QToolbar 中

无边框

borderless 设计允许您将 QInput 无缝集成到其他组件中，而无需 QInput 在其周围绘制边框或更改其背景颜色

圆角设计

rounded 属性仅与填充、轮廓和突出显示设计一起使用，如下面的示例所示

方形边框

square 属性只有在填充、带边框和突出显示的设计中才有意义，如下面的示例所示

强制深色模式

基本功能

原生属性

在 QInput 上设置的所有不在 **API** 中 props 列表中的属性都将传递给原生字段（input 或 textarea）。一些示例：autocomplete、placeholder。

请查看这些资源以获取有关原生属性的更多信息（对于输入，还可以查看每种类型的特定属性）

• input
• textarea

可清除

作为辅助工具，您可以使用 clearable 属性，以便用户可以通过附加的图标将模型重置为 null。下面示例中的第二个 QInput 等同于使用 clearable。

输入类型

以下 QInput 使用 type 属性来渲染其内部的原生等效 <input type="...">。

数字类型输入

您将使用 v-model.number（注意 number 修饰符）以及 type="number" 属性

文件类型输入

Textarea

当您需要 QInput 随着其内容一起增长时，请像下面的示例一样使用 autogrow 属性

前缀和后缀

自定义标签

使用 label 插槽，您可以自定义标签的外观或添加特殊功能，如 QTooltip。

阴影文本

带有 QBtn 类型“submit”的插槽

模型去抖动

去抖动的作用是在您监视模型并在其上执行昂贵操作时。因此，您希望首先让用户键入内容，然后再触发模型更新，而不是在每次按键时都更新模型。

加载状态

遮罩

您可以借助 mask 属性强制/帮助用户输入特定的格式。

以下是遮罩标记

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 */
}

或者您可以使用货币组件

<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。

这样您就可以编写类似这样的便捷规则

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。

外部验证

您还可以使用外部验证，只传递 error 和 error-message（启用 bottom-slots 以显示此错误消息）。

您还可以自定义错误消息的插槽

原生表单提交

当处理具有 action 和 method 的原生表单时（例如，当将 Quasar 与 ASP.NET 控制器一起使用时），您需要在 QInput 上指定 name 属性，否则 formData 将不包含它（如果应该包含）。