输入框

QInput 组件用于收集用户输入的文本或数字。它可以像普通的 input 一样使用 v-model。还支持错误验证，并具有多种样式，颜色和类型。

QInput API

外观设计

着色

Standard-标准

Filled-填充

Outlined-轮廓

Standout-突出

其中一个很合适的的用例就是将 Standout 模式的 QInput 用在 QToolbar 中：

Borderless-无边框

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

圆形边框

圆形（rounded）属性只能与填充，轮廓和突出的设计（Filled, Outlined 和 Standout ）一起工作，如下面的例子所示:

方形边框

方形（square ）属性只能与填充，轮廓和突出的设计（Filled, Outlined 和 Standout ）一起工作，如下面的例子所示:

黑色背景

基础特性

原生属性

所有给 QInput 设置的属性，如果未在 API 卡片中的 props 部分列出，那么它将会被传递给底层的原生标签（input 或 textarea）。例如： autocomplete，placeholder。

有关更多原生属性的信息，请参考：

• input
• textarea

可清除的

作为辅助，您可以使用 clearable 属性，这样用户可以通过附加的图标将数据重置为 null。下面第二个示例等价于使用 clearable

输入类型

下面示例中的 QInputs 都使用了 type 属性，以实现与原生等效的 <input type="...">。

输入数字类型

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

输入文件类型

文本域

当您需要 QInput 与其内容一起增长时，请使用如下示例中的 autogrow 属性：

前缀和后缀

自定义标签

使用 label 插槽可以自定义标签或使用 QTooltip 添加特殊功能。

阴影文本

插槽中使用 “submit” 类型的 QBtn

防抖模式

当您监听被绑定的数据的变化并对其进行昂贵的操作时，防抖的作用就体现出来了。我们一般希望先让用户完成整个输入之后再触发数据更新，而不是在每次按键时都更新数据。

加载状态

掩码

您可以通过 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 /* 不能与指令一起工作 */
}

或者您可以使用 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 类型的错误信息。

一个规则的格式如下：

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 字符串，那么验证只有在手动调用了 QInput 组件的 validate() 方法之后才会触发，或者是包裹它的 QForm 触发了提交事件。

异步规则

通过使用 async/await 或直接返回一个 Promise，规则也可以是异步的。

外部验证

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

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

原生表单提交

当处理一个带有 action 和 method 的原生表单时（如：使用 Quasar 和 ASP.NET 控制器时），您需要为 QInput 声明 name 属性，否则表单数据中不会包含它：

类型定义

type QInputType = NonNullable<QInputProps["type"]>;

type WithKnownType<
  TElement extends HTMLInputElement | HTMLTextAreaElement,
  TType extends QInputType,
> = Omit<TElement, "type"> & { type: TType };

/**
 * @example
 * ```ts
 * QInputNativeElement                      
 * QInputNativeElement<"textarea">          
 * QInputNativeElement<"text">              
 * QInputNativeElement<"text" | "number">   
 * QInputNativeElement<"text" | "textarea"> 
 * ```
 */
export type QInputNativeElement<T extends QInputType = QInputType> =
  T extends "textarea"
    ? WithKnownType<HTMLTextAreaElement, "textarea">
    : Omit<WithKnownType<HTMLInputElement, T>, "files"> & {
        files: T extends "file" ? FileList : null;
      };