碎片输入

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

图标按钮

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

{
  // 必需的图标
  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)`	当用户尝试添加重复值时触发。

组件

风格 & 特性

CSS辅助类

布局

按钮

导航

表单组件

分组

弹出窗口

进度

媒体

滚动

动画

其它组件

触摸/鼠标操作

实用程序

网络API封装