输入

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

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

设计

WARNING

对于您的QInput,您只能使用一种主要设计(filled, outlined, standout, borderless)。 您不能使用多个,因为它们是专有的。

Design Overview

着色

Coloring

标准

Standard

实心

Filled

轮廓

Outlined

突出

Standout

QToolbar中最适合用于突出设计的用例之一:

Standout in QToolbar

无边界

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

Borderless

圆形设计

如以下示例所示,rounded属性仅可与实心、轮廓和突出设计一起使用:

Rounded

方形边框

如以下示例所示,square属性仅可与实心、轮廓和突出设计一起使用:

Square borders

黑暗背景

Dark

基本特性

原生属性

所有在QInput上设置的,不在APIprops列表中的属性都将传递到原生字段(inputtextarea)。 例如:autocomplete、 placeholder。

请检查以下资源以获取有关原生属性的更多信息(对于输入,还请检查每种类型的特定属性):

可清除

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

Clearable

输入类型

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

WARNING

支持和行为完全是浏览器渲染页面的主题,而不是Quasar的核心代码。

Input types

TIP

某些输入类型(如datetime)总是渲染某些控件,因此,如果您使用的是label,则可能需要将其与stack-label一起设置,否则标签将与原生浏览器控件重叠。

输入数字类型

您将使用v-model.number(注意number修饰符)和type="number"属性:

Input of number type

输入文件类型

选择

作为使用带有type="file"的QInput的替代,您可能希望使用QFile选择器,甚至QUploader。但是,如果您希望使用QInput,请阅读下面的警告。

WARNING

当QInput为type="file"时,请勿使用v-model。 浏览器安全策略不允许将值设置到此类输入。 结果,您只能读取它(附加一个@input事件),而不能编写它。

Input of file type

文本区域

Textarea

当您需要QInput与其内容一起增长时,请使用autogrow属性,如下例所示:

Autogrow

前缀和后缀

Prefix and suffix

标签自定义

使用label槽可以自定义标签的方位或添加特殊功能如QTooltip

TIP

别忘了设置label-slot属性。

如果要与标签(QTooltip)的内容交互,请在插槽中的元素上添加all-pointer-events类。

Custom label

阴影文本

Shadow text

QBtn类型为“submit”的插槽

WARNING

当将类型为“submit”的QBtn放置在QField、QInput或QSelect的“before”、“after”、“prepend”或“append”插槽之一中时,您还应该在有问题的QBtn上添加@click侦听器。 该侦听器应调用提交表单的方法。 此类插槽中的所有“点击”事件均不会传播到其父元素。

去抖模式

当您观看模型并对其进行耗性能的操作时,去抖作用有时会发生。 因此,您想先让用户输入内容,然后再触发模型更新,而不是在每次击键时都更新模型。

Debounce model

加载状态

Loading state

掩码

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

WARNING

仅当type是“text”(默认),“search”,“url”,“tel”或“password”之一时,掩码才可用。

以下是掩码令牌:

令牌描述
#数字
S字母,a到z,不区分大小写
N字母数字,不区分大小写
A字母,转换为大写
a字母,转换为小写
X字母数字,字母转换为大写
x字母数字,字母转换为小写

QInput mask属性有辅助器完整列表。 为了方便起见,可以使用它们(例如:“phone”、“card”)或写出指定您的自定义需求的字符串。

Basic
Filling the mask

例如,如果您想强制用户键入某种格式,但是希望模型包含原始值,则unmasked-value非常有用:

Unmasked model

如果要强制用户从头开始填充掩码并允许输入的长度不固定,则reverse-fill-mask很有用:

Filling the mask in reverse

使用第三方掩码处理器

通过对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, value, emitValue }">
    <input :id="id" class="q-field__input text-right" :value="value" @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, value, emitValue }">
    <money :id="id" class="q-field__input text-right" :value="value" @input="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”)或写出指定您的自定义需求的字符串。

Basic
Maximum length

如果设置了lazy-rules,则验证在第一次失去焦点之后开始。从v1.11+开始,如果lazy-rules设置为ondemand 字符串,则只有在手动调用组件的validate()方法或包装器QForm提交自身时才会触发验证。

Lazy rules
Form validation

异步规则

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

TIP

考虑将异步规则与debounce属性结合使用,以避免在每次击键时立即调用异步规则,这可能会对性能造成不利影响。

Async rules

外部验证

您还可以使用外部验证,并且仅传递errorerror-message(启用bottom-slots以显示此错误消息)。

TIP

根据您的需要,您可以将Vuelidate(我们推荐的方法)或其他一些验证库连接到QInput。

External

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

Slot for error message

本地表单提交

当处理具有actionmethod的原生形式时(例如,使用Quasar和ASP.NET控制器),则需要在QInput上指定name属性,否则formData将不包含它(如果应该的话):

Native form

QInput API

Loading API...
Please wait...