搜索(文本字段)

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

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

安装

编辑 /quasar.conf.js:

framework: {
components: ['QSearch']
}

基本用法

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

Vue属性

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

Vue属性 类型 说明
icon 字符串 要使用的图标。
no-icon 布尔 隐藏图标
type 字符串 必须是以下内容之一:text(默认)、emailtelnumberurl。 这很重要,因为它决定了移动设备上弹出的键盘类型。
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 对象数组 在文本字段右侧的图标按钮。阅读下面的更多细节。

图标按钮

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

{
// 必需的图标
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颜色之一,如primarysecondaryorange-7teal-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文档