碎片输入

Quasar碎片输入允许用户输入一组文本项目,这些文本项目也可以通过在列表中快速删除碎片的形式进行编辑。

有关碎片输入中使用的碎片的更多详细信息,请参阅其文档

有关自动完成功能,另请参阅QAutocomplete文档。

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

安装

编辑/quasar.conf.js

framework: {
components: ['QChipsInput']
}

基本用法

<q-chips-input v-model="model" />

<!-- 禁用 -->
<q-chips-input v-model="model" disable />

<!-- 带浮动标签 -->
<q-chips-input v-model="model" float-label="Floating Label" />

<!-- 用自定义占位符 -->
<q-chips-input v-model="model" placeholder="Type some names" />

<!-- 在错误状态 -->
<q-chips-input v-model="model" error />

模型变量必须是一个数组。

用户可以通过点击/轻按“close”图标来移除碎片。添加一个碎片是通过点击/轻按组件、键入、然后按send图标或<ENTER>键完成的。按Backspace键可以删除文本字段的内容,或者如果是空的,则删除最后一个碎片。

Vue属性

支持v-model,它应该绑定到你范围内的一个字符串数组。

Vue属性 类型 说明
chips-color 字符串 覆盖默认的子碎片文本颜色。
chips-bg-color 字符串 覆盖默认的子碎片背景颜色。
add-icon 字符串 添加另一个图标覆盖当前图标(右侧的图标)。
readonly 布尔 如果只读,用户不能添加或删除碎片。

另请注意,您可以使用原生input的DOM属性:”max-length”, “autocomplete” 等。

通用输入字段属性:

属性 类型 说明
autofocus 布尔 渲染组件后聚焦输入字段。
placeholder 字符串 要在文本框中显示的文本,主要是为了解释应该输入的内容。
loading 布尔 将文本字段后面放置默认主题的旋转器,以高亮显示发生在背景中的某个过程。

另请注意,您可以使用输入字段的原生DOM属性: “name”, “max-length”, “autocomplete” 等。它们应用于QChipsInput包含的原生<input>

通用输入框属性:

属性 类型 说明
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
}

例子:

<q-chips-input
v-model="model"
color="secondary"
:after="[
{
icon: 'warning',
error: true,
handler () {
// do something...
}
}
]"
/>

着色

正如你可能已经注意到的那样,有”color”、”chips-color” 和 “chips-bg-color”以及”inverted”/“inverted-light”和”dark” 属性。
默认情况下,如果您只使用“color”,则输入框和碎片将共享颜色。 如果还指定了“chips-color”或“chips-bg-color”,则封装碎片的颜色将被覆盖。
当你想要输入框反转(颜色应用于背景),请指定“inverted”属性。 颜色浅时使用“inverted-light”。
在黑暗背景下使用时,请指定“dark”属性。

<!--使用一种颜色. -->
<q-chips-input color="secondary" v-model="model" />

<!--在反转模式下使用颜色(背景着色)。 -->
<q-chips-input color="secondary" v-model="model" />

<!--
着色封装的碎片。
-->
<q-chips-input
color="amber"
chips-color="yellow"
chips-bg-color="black"
inverted-light
v-model="model"
/>

<!--
当我们在深色背景上使用组件时,
  我们指定“dark”属性。
-->
<div class="bg-grey-9" style="padding: 15px">
<q-chips-input dark color="amber" v-model="model" />
</div>

懒惰输入

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

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

Autocomplete

您可以使用QAutocomplete 为用户提供可供选择的值列表。
当查找值列表打开时,<ENTER>键将从中选择一个值并将其添加到列表中。
如果要添加列表中未找到的值,请按send图标或按<ESC>键隐藏列表,然后按<ENTER>键。

<q-chips-input v-model="model" placeholder="Add from list or new ones">
<q-autocomplete @search="search" @selected="selected" />
</q-chips-input>

Vue方法

Vue方法 说明
add(value) value添加到模型中。
remove(index) 在模型中删除index处的值。
focus() 聚焦碎片输入框的文本字段。
select() 选择所有文本字段的文本和焦点。
clear() 将模型重置为空字符串。

Vue事件

Vue事件 说明
@input(newVal) 模型值更改时立即触发。
@change(newVal) 模型值延迟更改时触发。
@clear(clearVal) 清除模型时触发。
@duplicate(val) 当用户尝试添加重复值时触发。

更多示例

用QField包装

<q-field
icon="account_box"
label="Birthday"
:count="10"
helper="Some helper here"
>
<q-chips-input float-label="Float Label" v-model="model" />
</q-field>

列表中的用法

<q-list>
<q-item multiline>
<q-item-side icon="edit" />
<q-item-main>
<q-chips-input v-model="model" placeholder="Type names"/>
</q-item-main>
</q-item>
</q-list>