输入组件（文本字段）

Quasar的输入组件是text（我们称之为“单行输入”）和textarea（我们称之为“多行输入”）格式输入的基础。 它可用于常规文本输入、密码、电子邮件地址、数字、电话号码、网址和自动增长的文本区域。

辅助函数、错误消息占位符等许多其他功能可与QField很好地协作。

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QInput']
}

基本用法

<!-- 单行输入 -->
<q-input v-model="text" />
<q-input v-model="text" stack-label="Stack Label" />
<q-input v-model="text" float-label="Float Label" placeholder="Gigi" />

<!-- 多行输入 -->
<q-input
  v-model="area"
  type="textarea"
  float-label="Textarea"
  :max-height="100"
  rows="7"
/><!-- max-height就以像素为单位  -->

Vue属性

支持v-model，它应该被绑定到你的作用域中的一个字符串或数字（取决于type属性）。

属性 类型 说明
type 字符串 必须是以下其中一个：text（默认）、textarea、email、tel、number、password和url。这很重要，因为它决定了移动设备上弹出的键盘类型。
readonly 布尔 如果设置为“true”，则文本字段为只读，并且用户不能更改值。
clearable 布尔 如果设置为“true”，组件会为用户提供一个可操作的图标来删除输入的文本。
no-pass-toggle 布尔 如果type是“password”并设置为“true”，则不会显示密码切换。
upper-case 布尔 将输入转换为大写。
lower-case 布尔 将输入转换为小写。

当您将type设置为“number”时，您可以使用一些其他属性：

属性 类型 说明
decimals 数字 应显示的最大小数位数。
numeric-keyboard-toggle 布尔 某些移动键盘不允许键入点来组成浮点数，所以此属性添加了一个图标，当点击/轻按时，它将键盘切换到字母数字键盘。

另请注意，您可以使用输入组件的原生DOM属性：“min”，“max”，“step”。

当您将类型设置为“textarea”时，这些是您可以使用的其它属性：

属性 类型 说明
max-height 数字 以像素为单位的数字，用于确定自动增长的textarea的最大高度。

还有textarea的原生DOM属性：rows。

通用输入字段属性：

属性 类型 说明
autofocus 布尔 渲染组件后聚焦输入字段。
placeholder 字符串 要在文本框中显示的文本，主要是为了解释应该输入的内容。
loading 布尔 将文本字段后面放置默认主题的旋转器，以高亮显示发生在背景中的某个过程。
clearable 布尔 如果设置为“true”，则该组件向用户提供可操作的图标以移除当前选择。

通用输入框属性：

属性 类型 说明
prefix 字符串 应在文本字段之前显示的文本。
suffix 字符串 应在文本字段后显示的文本。
float-label 字符串 一旦输入字段获得焦点，文本标签将“浮动”到输入字段上方。
stack-label 字符串 将显示在输入字段上方并且是静态的文本标签。
color 字符串 一个来自Quasar调色板的颜色。
inverted 布尔 反转模式。颜色应用于背景。
inverted-light 布尔 浅色的反转模式。颜色应用于背景。
dark 布尔 QInput是否在黑暗的背景下呈现？
align 字符串 ‘left’、 ‘center’ 或 ‘right’中的一个，用于确定文本字段内的文本对齐。
disable 布尔 如果设置为true，则文本字段被禁用，用户无法输入任何内容。
hide-underline 布尔 隐藏底部边框。
error 布尔 如果设置为true，则会更改输入字段颜色以显示出现错误。
warning 布尔 与error相同，更改输入字段颜色以显示警告。
before 对象数组 在文本字段左侧的图标按钮。阅读下面的更多细节。
after 对象数组 在文本字段右侧的图标按钮。阅读下面的更多细节。

重要
可以使用原生<input>或<textarea>的所有DOM属性。例如：maxlength，rows，min，max，step，autocomplete等。

图标按钮

本部分引用before和after属性，它们可以将额外按钮作为图标添加到文本字段中。这是两个属性的结构：

{
  // 必需的图标
  icon: String,
  // 当点击/轻按图标时
  // 调用的必需函数
  handler: Function,

  // 可选的。 如果模型有一个值
  // 则显示图标按钮
  content: Boolean,

  // 可选的。 如果文本字段标有错误
  // 则显示图标按钮
  error: Boolean
}

例子:

<!--
  当QInput发生错误时（通过“error”属性）
  显示一个图标按钮（icon设为“warning“）
-->
<q-input
  v-model="text"
  :error="error"
  type="password"
  :after="[
    {
      icon: 'warning',
      error: true,
      handler () {
        // do something...
      }
    }
  ]"
/>

<!--
  当模型具有非空值时
  显示一个图标按钮（icon设为“arrow_forward“）
-->
<q-input
  v-model="text"
  :after="[
    {
      icon: 'arrow_forward',
      content: true,
      handler () {
        // do something...
      }
    }
  ]"
/>

标签

QInput带有两种内置的标签形式。 您可以使用float-label或stack-label属性为字段的标签添加文本。 stack-label在字段上方的位置是静态的，而fload-label更具动态性。 查看右边的例子来看看不同之处。

<q-input v-model="text" stack-label="Stack Label" placeholder="Add some text..."  />
<q-input v-model="text" float-label="Float Label"/>

如上所示，您还可以添加一个占位符来帮助向用户解释应该输入什么类型的内容。

密码输入

如果使用输入类型“password”，该组件将隐藏用户输入的字符，但它也会为用户提供一个可点击的图标来切换输入，以使输入易读。

<q-input v-model="text" type="password" float-label="Password" />

数字输入

以下示例显示了一个数字输入类型。

<q-input v-model="number" type="number" float-label="Number" />

前缀和后缀

您可以在该字段之前或之后添加文本作为输入掩码的一部分，例如，显示欧元或美元货币。

<!-- 注意prefix属性 -->
<q-input v-model="number" type="number" prefix="$US" stack-label="Number" />

<!-- 注意suffix属性 -->
<q-input v-model="number" type="number" suffix="€" stack-label="Number" />

<!-- 注意suffix属性 -->
<q-input v-model="email" type="email" suffix="@gmail.com" stack-label="Type Google Email" />

错误状态

您可以控制颜色以显示用户输入错误或其他系统错误。 要做到这一点，将error属性设置为true。

<q-input :error="error" v-model="text" float-label="Colored Black" color="black" />

如果您想向用户显示有关错误情况的说明文字，可以将QInput封装在QField组件中。

<!--
  注意error属性现在用于包装组件QField
  而不是QInput
-->
<q-field :error="error" error-label="Oh buggers! You made a boo boo.">
  <q-input v-model="text" float-label="Colored with Error" color="amber"  />
</q-field>

有关其用法的更多信息，请参阅QField文档。

加载状态

如果出于某种原因，输入需要一些较长期的后台操作或进程，则可以通过将loading属性设置为true来添加一个旋转器来指示进度。

<q-input :loading="loading" v-model="text" placeholder="Add some text..." />

Vue方法

Vue方法 说明
clear() 清除模型。将其设置为空字符串。
togglePass() 仅适用于输入“密码”。切换显示清晰的密码与否。
focus() 专注于文本框。
blur() 使文本字段失去焦点。
select() 选择所有文本字段的文本和焦点。

Vue事件

Vue事件 说明
@input(newVal) 即时模型值更改时触发。
@change(newVal) 懒惰模型值更改时触发。
@clear(clearVal) 清除模型时触发。
@focus 聚焦时触发。
@blur 失去焦点时触发。
@keydown 由文本字段上的keydown事件触发。
@keyup 由文本字段上的keyup事件触发。
@click 由文本字段上的原生“click”事件触发。

格式化

可以通过两种方式将格式添加到QInput。一个是基本组件。另一个是QField组件。两种方法都提供inverted着色。

附加的Vue属性

属性 类型 说明
color 字符串 QInput应具有的颜色。默认是primary。
inverted 布尔 设置为true，由color属性为字段背景着色。
inverted-light 布尔 设置为“true”，由color属性为字段背景着色（当颜色较浅时）。
dark 布尔 如果该字段在黑色背景上，则设置为true。它将反转文本颜色以使其变亮。
align 文字 控制输入​​的 ‘right’、 ‘center’ 或 ‘left’ 对齐。默认值是’left’。

基本格式示例

这会使区域变黑。

<q-input v-model="text" float-label="Colored" color="black" />

这将显示琥珀色的反转颜色的输入字段。 在这里，文本会自动翻转为更浅的颜色。

<q-input v-model="text" inverted-light color="amber" stack-label="Amber Colored Background" />

对齐

您还可以将输入字段对齐到右侧、中间或左侧。 默认值是左侧。 以下示例将显示欧元货币输入字段。

<!-- 将文本框内容对齐到右侧 -->
<q-input v-model="number" align="right" type="number" suffix="€" stack-label="Number" />

基本用法与QField

还可以通过将QInput封装在QField组件中来进一步增强QInput。

<div class="bg-grey-9" style="width: 500px; padding: 25px">
  <q-field
    icon="wifi"
    label="Some Label"
    :count="10"
    helper="Some helper"
    :error="error"
    error-label="Some error"
  >
    <q-input
      v-model="text"
      dark
      color="yellow"
      float-label="Textfield"
    />
  </q-field>
</div>

QField的上述用法将在深灰色背景中以反白色文本显示输入字段。 注意QInput’dark`属性的用法。 这控制了文本颜色的反转。

有关其用法的更多信息，请参阅QField文档。

使用Vuelidate进验证

Quasar对表单组件验证的建议是使用Vuelidate，因为它非常适合整体架构。 它很简单、轻量级和基于模型。

您需要先将Vuelidate添加到您的项目中。 参见这里。

<template>
  <q-input
    type="email"
    :error="$v.email.$error"
    v-model="email"
    @blur="$v.email.$touch"
  />
</template>

<script>
import { required, email } from 'vuelidate/lib/validators'

export default {
  data () {
    return {
      email: ''
    }
  },
  validations: {
    email: { required, email }
  }
}
</script>

对于显示错误标签、辅助程序或字符计数器等更多选项，请使用QField包装QInput。 这里是一个更为复杂的例子。

‘v-model`的指令修饰符

Vue带有v-model上的标准修饰符，它可以与QInput结合使用。 它们是.lazy和.trim。

.lazy

Vue很快会为组件上的v-model提供.lazy修饰符，但在此之前，您可以使用更长的等效形式：

<q-input
  :value="model"
  @change="val => { model = val }"
/>

.trim

如果您想自动消除用户输入内容的前后空白，可以将trim修饰符添加到v-model管理的输入中：

<q-input v-model.trim="msg" />
字段 表单验证