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

自定y我属性名称

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

WARNING

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

Custom label, value and disable props

自定义菜单选项

Options slot

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

Object options

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

No options slot

延迟加载

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

Lazy load 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 autocomplete
Autocomplete on more than 2 chars
Lazy autocomplete
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

安全处理

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秒内未输入新键时将重置),该缓冲区将用于在选项标签中进行搜索
    • 如果多次键入缓冲区中的第一个键,则选择以该字母开头的下一个选项(在当前焦点之后)
    • 选择与键入的文本匹配的下一个选项(从当前的焦点开始)(匹配是模糊的-选项标签应以第一个字母开头并包含所有字母)

当选项列表打开时:

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

QSelect API

Loading API...
Please wait...