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

¥The QInput component is used to capture text input from the user. It uses v-model, similar to a regular input. It has support for errors and validation, and comes in a variety of styles, colors, and types.

设计(Design)

¥Design

着色(Coloring)

¥Coloring

标准式(Standard)

¥Standard

已填充(Filled)

¥Filled

概述(Outlined)

¥Outlined

突出式(Standout)

¥Standout

Standout 设计最合适的用例之一是 QToolbar：

¥One of the most appropriate use cases for Standout design is in a QToolbar:

无边框(Borderless)

¥Borderless

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

¥The borderless design allows you to seamlessly integrate your QInput into other components without QInput drawing a border around itself or changing its background color:

圆角设计(Rounded design)

¥Rounded design

rounded 属性仅与 Filled、Outlined 和 Standout 设计一起使用，如下例所示：

¥The rounded prop only works along with Filled, Outlined and Standout designs, as showcased in the example below:

方形边框(Square borders)

¥Square borders

square 属性仅与 Filled、Outlined 和 Standout 设计一起使用才有意义，如下例所示：

¥The square prop only makes sense along with Filled, Outlined and Standout designs, as showcased in the example below:

强制暗黑模式(Force dark mode)

¥Force dark mode

基本功能(Basic features)

¥Basic features

原生属性(Native attributes)

¥Native attributes

QInput 上设置的所有属性，如果 API 中的 props 列表中没有，则将传递到原生字段（input 或 textarea）。一些示例：自动补齐，占位符。

¥All the attributes set on QInput that are not in the list of props in the API will be passed to the native field (input or textarea). Some examples: autocomplete, placeholder.

请查看以下资源以获取有关原生属性的更多信息（对于输入，还请检查每种类型的具体属性）：

¥Please check these resources for more information about native attributes (for input check also the specific attributes for each type):

• input

• textarea

可清除(Clearable)

¥Clearable

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

¥As a helper, you can use clearable prop so user can reset model to null through an appended icon. The second QInput in the example below is the equivalent of using clearable.

输入类型(Input types)

¥Input types

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

¥The following QInputs make use of the type prop in order to render native equivalent <input type="..."> inside of them.

输入数字类型(Input of number type)

¥Input of number type

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

¥You’ll be using v-model.number (notice the number modifier) along with type="number" prop:

文件类型输入(Input of file type)

¥Input of file type

文本区域(Textarea)

¥Textarea

如果你需要 QInput 随其内容一起扩展，请使用 autogrow 属性，如下例所示：

¥When you need QInput to grow along with its content, then use the autogrow prop like in the example below:

前缀和后缀(Prefix and suffix)

¥Prefix and suffix

自定义标签(Custom Label)

¥Custom Label

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

¥Using the label slot you can customize the aspect of the label or add special features as QTooltip.

阴影文本(Shadow text)

¥Shadow text

QBtn 类型为 “submit” 的插槽(Slots with QBtn type “submit”)

¥Slots with QBtn type “submit”

去抖模型(Debouncing model)

¥Debouncing model

去抖动的作用是用于观察模型并对其进行高开销操作的时候。因此，你需要先让用户输入内容，然后再触发模型更新，而不是在每次按键时更新模型。

¥The role of debouncing is for times when you watch the model and do expensive operations on it. So you want to first let user type out before triggering the model update, rather than updating the model on each keystroke.

加载状态(Loading state)

¥Loading state

蒙版(Mask)

¥Mask

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

¥You can force/help the user to input a specific format with help from mask prop.

以下是掩码标记：

¥Below are mask tokens:

QInput mask 属性有辅助函数：完整列表。你可以为了方便起见使用这些属性（例如：“phone”、“card”），也可以编写指定自定义需求的字符串。

¥There are helpers for QInput mask prop: full list. You can use these for convenience (examples: “phone”, “card”) or write the string specifying your custom needs.

例如，如果你想强制用户输入特定格式，但希望模型包含原始值，则 unmasked-value 非常有用：

¥The unmasked-value is useful if for example you want to force the user type a certain format, but you want the model to contain the raw value:

如果你想强制用户从末尾填充掩码并允许输入不固定长度，则 reverse-fill-mask 非常有用：

¥The reverse-fill-mask is useful if you want to force the user to fill the mask from the end and allow non-fixed length of input:

使用第三方 mask 处理器(Using third party mask processors)

¥Using third party mask processors

你可以通过对 QInput 进行一些小调整来轻松使用任何第三方遮罩处理器。

¥You can easily use any third party mask processor by doing a few small adjustments to your QInput.

从 QInput 开始，如下所示：

¥Starting from a QInput like this:

<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 指令：

¥You can use v-money directive:

<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 组件：

¥Or you can use money component:

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

验证(Validation)

¥Validation

内部验证(Internal validation)

¥Internal validation

你可以使用 :rules 属性验证 QInput 组件。指定嵌入规则数组或你自己的验证器。你的自定义验证器将是一个函数，如果验证器成功，则返回 true；如果验证器失败，则返回带有错误消息的 String。

¥You can validate QInput components with :rules prop. Specify array of embedded rules or your own validators. Your custom validator will be a function which returns true if validator succeeds or String with error message if it doesn’t succeed.

这样你就可以编写便捷的形状规则，例如：

¥This is so you can write convenient rules of shape like:

value => condition || errorMessage

例如：

¥For example:

value => value.includes('Hello') || 'Field must contain word Hello'

你可以通过在 QInput 上调用 resetValidation() 方法来重置验证。

¥You can reset the validation by calling resetValidation() method on the QInput.

QInput rules 属性有辅助函数：完整列表。为了方便起见，你可以使用这些值（例如：“date”、“time”、“hexColor”、“rgbOrRgbaColor”、“anyColor”），或者编写字符串来指定你的自定义需求。

¥There are helpers for QInput rules prop: full list. You can use these for convenience (examples: “date”, “time”, “hexColor”, “rgbOrRgbaColor”, “anyColor”) or write the string specifying your custom needs.

如果你设置了 lazy-rules，则验证将在第一次模糊后开始。如果 lazy-rules 设置为 ondemand 字符串，则仅在手动调用组件的 verify() 方法或封装器 QForm 自行提交时才会触发验证。

¥If you set lazy-rules, validation starts after first blur. If lazy-rules is set to ondemand String, then validation will be triggered only when component’s validate() method is manually called or when the wrapper QForm submits itself.

异步规则(Async rules)

¥Async rules

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

¥Rules can be async too, by using async/await or by directly returning a Promise.

外部验证(External validation)

¥External validation

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

¥You can also use external validation and only pass error and error-message (enable bottom-slots to display this error message).

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

¥You can also customize the slot for error message:

原生表单提交(Native form submit)

¥Native form submit

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

¥When dealing with a native form which has an action and a method (eg. when using Quasar with ASP.NET controllers), you need to specify the name property on QInput, otherwise formData will not contain it (if it should):