表单字段(Field)

Field组件允许您轻松创建响应式表单UI——通过使用主标签、图标、错误占位符及错误状态、助手占位符和项目/字符计数器来包装每个表单组件（QInput，QSelect，QDatetime，QChipsInput等）

在小窗口中，标签和内容将垂直堆叠，而较大的窗口标签将放置在QField内容的左侧。 无论窗口宽度如何，图标总是位于标签和内容的左侧。

适用于任何组件，不仅适用于Form组件。

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QField']
}

基本用法

<q-field
  icon="cloud"
  label="Your Gmail"
  helper="Helper"
  :error="mailHasError"
  error-label="We need a valid email"
  :count="10"
>
  <q-input suffix="@gmail.com" v-model="model" />
</q-field>

Vue属性

Vue属性 类型 说明
label 字符串 要使用的主要标签。
icon 字符串 标签左侧使用的图标。
icon-color 字符串 图标的可选颜色。
helper 字符串 帮助文本,被放置在您包装的表单组件下方。
error 布尔 高亮以显示字段和包装的表单组件有错误。
error-label 字符串 如果指定了error 并且’true’，那么字段帮助文本就被这个属性替换。不依赖于字段帮助文本的存在。
warning 布尔 高亮以显示字段和包装的表单组件有警告。
warning-label 字符串 如果指定了warning并且是true，那么字段帮助文本将被这个属性替换。不依赖于字段帮助文本的存在。
count 数字/布尔 在包装的表单组件中添加一个字符或项目的计数器（如碎片）。如果是布尔值，它只是计数它们。如果是数字类型，它也会添加一个最大数字，但不能作为限制。
inset 字符串 在当前字段缺失图标和/或标签时，在您的字段插入以与其他字段对齐。’icon’、 ‘label’ 或 ‘full’（图标和标签都插入）之一。
orientation 字符串 覆盖响应方向。 ‘vertical’、’horizontal’之一。
label-width 数字 在12个网格点中，标签需要多少？默认值是5.最小值是1，最大值是12.
dark 布尔 你的字段是在黑暗的背景下使用？

例子

以下只是QField可以为您做什么的一瞥。

使用计数器

<!--
  最多16个字符。
  注意“count”属性（和可选的
  限制最大字符数量的max-length
  ）
-->
<q-field
  :count="16"
>
  <q-input type="password" max-length="16" v-model="model" />
</q-field>

<!--碎片计数。 注意“count”属性 -->
<q-field
  count
  icon="account_box"
  helper="Some helper here"
  :label-width="3"
>
  <q-chips-input float-label="Float Label" v-model="model" />
</q-field>

<!-- 选定选项计数 -->
<q-field
  count
>
  <q-select
    v-model="select"
    :options="[
      {
        label: 'Google',
        icon: 'email',
        value: 'goog'
      },
      {
        label: 'Facebook',
        description: 'Enables communication',
        value: 'fb'
      },
      {
        label: 'Twitter',
        secondIcon: 'alarm',
        value: 'twtr'
      }
    ]"
  />
</q-field>

使用Vuelidate进行验证

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

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

<template>
  <q-field
    icon="mail"
    label="Email"
    helper="Type the email we can use to contact you"
    :error="$v.email.$error"
    error-label="Please type a valid email"
    count
  >
    <q-input
      type="email"
      v-model="email"
      @blur="$v.email.$touch"
    />
  </q-field>
</template>

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

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

浮动标签QInput

<q-field
  icon="cloud"
  helper="Helper"
>
  <q-input v-model="model" float-label="Float Label" />
</q-field>

自定义标签宽度

如果您为一个QField自定义标签宽度，那么最好将其应用于所有同级QField以实现UI一致性。
由于Quasar正在使用12点网格系统，因此为标签宽度分配一个>=1和<12的数字。 默认是5。

<q-field
  helper="Helper"
  :label-width="3"
  label="Label"
>
  <q-input v-model="model" />
</q-field>

使用Inset

当一些字段有图标和标签，而一些字段缺失一个或全部时，Inset对于完全对齐所有QField非常有用。
例如，如果没有QField使用图标，那么为任何QField添加Inset是有意义的。 标签也一样。

<!--
  这个例子有图标和标签。 
  自从有了这两个属性，
  当给其他QFields添加inset时,
  它就成为其他QFields的参考
-->
<q-field
  icon="cloud"
  helper="Helper"
  label="Horizontal"
>
  <q-input v-model="model" />
</q-field>

<!--
  这个例子只有标签，所以
  我们插入图标（因为
  至少有一个QField有图标）
-->
<q-field
  helper="Helper"
  label="Label"
  inset="icon"
>
  <q-input v-model="model" />
</q-field>

<!--
  这个例子没有图标或标签，所以
  我们插入两个（因为有一个
  同时使用图标和标签的QField）。
-->
<q-field
  helper="Helper"
  inset="full"
>
  <q-input v-model="model" />
</q-field>

包装并排QInputs

我们使用Quasar CSS Flex创建一个放置两个QInput的不可换行的行。

当QField包装多个Form组件时，避免向QField添加计数器，因为只有一个Form组件最终会将其长度同步到QField。 每个Form组件都有自己的长度而只有一个计数器的占位符，所以最终你只会使用户混淆。

<!-- 以堆叠标签为例 -->

<q-field
  icon="security"
  helper="Helper"
  label="Label"
>
  <!-- 我们创建一行 -->
  <div class="row no-wrap">
    <q-input class="col" v-model="model" stack-label="Input 1" />
    <q-input class="col" v-model="model" stack-label="Input 2" />
  </div>
</q-field>

黑暗的背景

将QField放置在黑暗背景上时，使用dark属性通知QField需要调整颜色。

<!--
  这个例子有一个黑暗背景的包装的<div>
-->
<div class="bg-grey-9" style="padding: 10px">
  <!-- 注意"dark"属性 -->
  <q-field
    dark
    label="Knob"
    helper="Touch to change"
    icon="cake"
    :error="error"
  >
    <q-knob
      v-model="knob"
      :min="knobMin"
      :max="knobMax"
    >
      <q-icon class="on-left" name="volume_up" /> {{knob}}
    </q-knob>
  </q-field>
</div>

选项组

这是一个选项组组件的例子。

<q-field
  icon="flight_takeoff"
  label="Flight"
  helper="Pick the day when you want to go"
>
  <q-option-group
    type="radio"
    v-model="option"
    :options="[
      { label: 'Monday', value: 'monday' },
      { label: 'Tuesday', value: 'tuesday' },
      { label: 'Friday', value: 'friday' }
    ]"
  />
</q-field>
分页 文本字段