搜索（文本字段）

搜索组件为用户提供了一个输入字段，其中包含用于搜索的附加功能。 有关自动完成功能，请参阅QAutocomplete文档。

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

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QSearch']
}

基本用法

<q-search v-model="search" />

Vue属性

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

Vue属性 类型 说明
icon 字符串 要使用的图标。
no-icon 布尔 隐藏图标
type 字符串 必须是以下内容之一：text（默认）、email、tel、number和url。 这很重要，因为它决定了移动设备上弹出的键盘类型。
debounce 数字 输入去抖毫秒数。 默认值是300.
readonly 布尔 如果设置为“true”，则文本字段为只读，并且用户不能更改值。

一个更相关的例子：

<q-search
  v-model="searchModel"
  :debounce="600"
  placeholder="Hotels"
  icon="local_hotel"
  float-label="What is your hotel?"
/>

通用输入字段属性：

属性 类型 说明
autofocus 布尔 渲染组件后聚焦输入字段。
placeholder 字符串 要在文本框中显示的文本，主要是为了解释应该输入的内容。
clearable 布尔 如果设置为“true”，组件会为用户提供一个可操作的图标来删除输入的文本。

另请注意，您可以使用输入组件的本地DOM属性：“max”，“max-length”，“autocomplete”等。

通用输入框属性：

属性 类型 说明
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 对象数组 在文本字段右侧的图标按钮。阅读下面的更多细节。

图标按钮

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

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

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

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

例子:

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

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

懒惰输入

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

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

Vue方法

Vue方法 说明
clear() 将模型重置为空字符串。
clearAndFocus() 将模型重置为空字符串并提供输入焦点。
focus() 聚焦文本字段。
blur() 使文本字段失去焦点。
select() 选择所有文本字段的文本和焦点。

Vue事件

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

着色

使用color属性, 值为调色板中的Quasar颜色之一，如primary，secondary，orange-7，teal-2：

<q-search color="orange" v-model="search" />

使用inverted属性，将输入框的背景改变为颜色。

<q-search inverted color="orange" v-model="search" />

错误状态

使用error属性来显示出现错误。 这会将组件颜色变成红色。

<q-search error v-model="search" />
<q-search :error="hasError" inverted v-model="search" />

禁用

使用disable属性阻止用户输入。

<q-search disable v-model="search" color="primary" />

使用布局

如果你想在QLayout的QToolbar中设置搜索：

<q-layout>
  ...
  <!--
    注意我们为QToolbar和
    QSearch指定了“inverted”和color ="none"。
    这使得QSearch使用由QToolbar设置的背景颜色。
  -->
  <q-toolbar slot="header" color="primary">
    <q-search inverted color="none" v-model="search" />
  </q-toolbar>
  ...
</q-layout>

格式化

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

附加的Vue属性

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

基本格式示例

这会使区域变黑。

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

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

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

对齐

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

<!-- 将文本框内容对齐到右侧 -->
<q-search v-model="text" align="right" />

基本用法与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-search
      v-model="text"
      dark
      inverted
      color="black"
      float-label="Textfield"
    />
  </q-field>
</div>

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

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

编辑器（WYSIWYG） 滑块