Select

QSelect Vue组件有两种选择-单个或多个。 该组件为选择列表和操作打开菜单。 对于更长的列表, 可以使用过滤器。

如果您要查找下拉式“按钮”而不是“输入”,请改用按钮下拉

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

设计

总览

WARNING

对于您的QSelect,您只能使用一种主要设计(filled, outlined, standout, borderless)。 您不能使用多个,因为它们是专有的。

Design Overview

装饰器

Decorators

着色

Coloring

可清除

作为辅助,您可以使用clearable属性,以便用户可以通过附加的图标将模型重置为null。 在下面的示例中,第二个QSelect相当于使用clearable

Clearable

禁用和只读

Disable and readonly

QBtn类型为“submit”的插槽

WARNING

当将类型为“submit”的QBtn放置在QField、QInput或QSelect的“before”、“after”、“prepend”或“append”插槽之一中时,您还应该在有问题的QBtn上添加@click侦听器。 该侦听器应调用提交表单的方法。 此类插槽中的所有“点击”事件均不会传播到其父元素。

菜单过渡

WARNING

请注意,在使用options-cover属性时,过渡功能不起作用。

在下面的示例中,展示了一些过渡。 有关可用过渡的完整列表,请转到过渡

Menu transitions

选项列表显示模式

默认情况下,QSelect将选项列表显示为桌面设备上的菜单和移动设备上的对话框。 您可以通过使用behavior属性来强制一种行为。

WARNING

请注意,在iOS菜单上,行为可能会产生问题,尤其是在与use-input属性结合使用时。 您可以使用有条件的behavior属性,例如:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"以仅在iOS上使用对话模式。

Show options in menu
Show options in dialog

模型

WARNING

单一选择的模型可以是任何内容(字符串、对象等),而多重选择的模型则必须是数组。

Single vs multiple selection
Multiple selection, counter and max-values

您可以在下面的“选项”部分中了解可以影响模型内容的emit-value属性。

选项

选项类型

String options
Object options

影响模型

当使用emit-value时,模型从指定的选定选项变为确定的value。 默认是发出整个选项。 仅当选项为“对象”形式时才使用它。

Emit-value

当使用map-options时,模型只能包含value,并且将与选项映射以确定其标签。 涉及性能损失,因此仅在绝对必要时使用它。 例如,如果模型包含整个对象(因此包含标签属性),则不需要它。

Map options

自定义属性名称

默认情况下,QSelect会查看选项数组对象中每个选项的labelvaluedisablesanitize属性。 但是您可以覆盖那些内容:

WARNING

如果将函数用于自定义属性,请始终检查选项是否为null。 这些函数既用于列表中的选项,也用于选定的选项。

Custom label, value and disable props

自定义菜单选项

Options slot

这是另一个示例,其中我们向每个选项添加QToggle。 可能性是无止境的。

Object options

默认情况下,当没有选项时,菜单不会出现。 但是您可以自定义此情况并指定菜单应显示的内容。

No options slot

延迟加载

下面的示例简要介绍了如何延迟加载选项。 这意味着,与许多其他事情一样,首次渲染不需要options属性。

Lazy load options

当滚动到末尾时,可以动态加载新选项:

Dynamic loading options

封面模式

Menu covering component

显示值

Custom display value
Chips as display value
Selected-item slot

过滤和自动完成

带有use-input的原生属性

QSelect上所有未在API属性列表中设置的属性都将传递到使用的原生输入字段(请首先检查use-input属性描述以了解其作用)以进行过滤/自动完成/添加新值。 例如:autocomplete, placeholder。

更多信息: 原生输入组件属性.

Filtering options
Basic filtering
Filtering on more than 2 chars
Text autocomplete
Lazy filtering
Selecting option after filtering

创建新值

TIP

以下只是一些示例,可帮助您开始进行自己的QSelect行为。 这不是QSelect提供的可能性的详尽列表。

将此功能与use-input属性一起使用是有意义的。

为了启用新值的创建,您需要要么指定new-value-mode属性和/或侦听@new-value事件。 如果您两者都使用,那么在您的自定义情景中,侦听@new-value的目的仅仅是覆盖new-value-mode

new-value-mode属性

new-value-mode属性值指定了应如何添加值:add(即使有重复,也要添加一个值)、add-unique(只有不重复时才有添加)或toggle(如果尚未在模型中则添加值,否则将其删除)。

通过使用此属性,您无需监听@new-value事件,除非您为了一些特定的情况要覆盖其行为。

New value mode

@new-value事件

发出@new-value事件,并带上要添加的值和一个done回调函数。 done回调函数具有两个可选的参数:    - 要添加的值    - 行为(与new-value-mode属性的值相同,并且在指定时会覆盖此属性——如果使用了它)——默认行为(如果未使用new-value-mode) 会添加值,即使它是重复的

不带任何参数调用done()只是清空输入框的值,而不会以任何方式篡改模型。

Listening on @new-value
Adding only unique values

使用菜单和过滤

过滤并将新值添加到菜单:

Filtering and adding to menu

过滤新值(在下面的示例中,要添加的值至少需要传递3个字符),并且不会添加到菜单中:

Filtering without adding to menu

从input生成多个值:

Generating multiple values

安全处理

WARNING

如果您不信任来源,请始终对值进行安全处理(如果值来自用户输入)。

您可以通过以下方式强制安全处理菜单选项:

  • 将不受信任的选项的sanitize密钥设置为true(用于特定的不受信任的选项)
  • 或通过设置QSelect的options-sanitize属性(对于所有选项)

WARNING

如果您使用option插槽,则您负责安全处理菜单选项。 options-sanitize属性将不适用。

如果满足以下条件,则会安全处理QSelect的显示值:

  • 设置了QSelect的display-value-sanitize属性
  • 或者您不使用display-value
    • 设置了QSelect的options-sanitize属性
    • 任何选定的选项都将sanitize键设置为true

WARNING

如果您使用selectedselected-item插槽,则您负责对显示值进行安全处理。 display-value-sanitize属性将不适用。

Sanitize options
Sanitize display value

渲染性能

除非在大型集合上使用map-options,否则渲染性能不太受选项数量的影响。 请注意,无限滚动在工作,当用户滚动列表时,它会渲染其他选项。

TIP

为了在使用大量选项的同时获得最佳性能,请使用Object.freeze(options)冻结传递给options属性的数组。

100k options

键盘导航

当QSelect被聚焦时:

  • ENTERARROW DOWN(如果未设置use-input,则按SPACE)将打开选项列表
  • 如果设置了use-chips
    • 按下SHIFT + TAB将在QChips中向后导航(如果选择了QChip,TAB将在QChips中向前导航)
    • 选择QChip时按ENTER将从选择中删除该选项
    • BACKSPACE将从选择中删除最后一个选项(当设置了use-input时,输入应为空)
  • TAB(如果未设置use-chips或选择了第一个QChip,则按SHIFT + TAB)将导航至下一个或页面上的上一个可聚焦元素
  • 如果未设置use-input,则键入文本(0 - 9 or A - Z将:
    • 创建一个搜索缓冲区(当在1.5秒内未输入新键时将重置),该缓冲区将用于在选项标签中进行搜索
    • 如果多次键入缓冲区中的第一个键,则选择以该字母开头的下一个选项(在当前焦点之后)
    • 选择与键入的文本匹配的下一个选项(从当前的焦点开始)(匹配是模糊的-选项标签应以第一个字母开头并包含所有字母)

当选项列表打开时:

  • ARROW UPARROW DOWN将在选项列表中向上或向下导航
  • 使用箭头键进行导航时,导航将在到达列表的开头或结尾时结束
  • 选项在列表中被选中时按ENTER(如果未设置use-input,则按SPACE;如果未设置multiple,则按TAB)将:
    • 选择选项,并且如果未设置multiple则关闭选项列表
    • 如果设置了multiple,则切换选项

本地表单提交

当处理具有actionmethod的原生形式时(例如,使用Quasar和ASP.NET控制器),则需要在QSelect上指定name属性,否则formData将不包含它(如果应该的话)- 所有值都转换为字符串(本地行为,因此不要使用对象值):

Native form

QSelect API

Loading API...
Please wait...