字段

QField Vue组件用于对表单组件提供通用功能和切面。 它使用:value(如果想使用clearable属性,则使用v-model)来了解内部组件的模型。 它支持标签、提示、错误、验证并有多种样式和颜色。

QField允许您在其中显示任何表单控件(实际上几乎是任何东西)。 只需将所需的内容放入control插槽即可。

WARNING

不要用QField包装QInput、QFile或QSelect。 这些组件已经继承了QField。

QField API

设计

TIP

下面的示例使用愚蠢的内容(文本)只是为了向您展示QField可以使用的设计。 要查阅包裹实际组件的示例,请参见“基本功能”部分。

WARNING

QField不(也不应该)管理您的control插槽,因此,如果您使用label属性,最好同时指定stack-label,否则当QField未被聚焦时,它可能与控件重叠 。

概述

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




着色




标准




实心




轮廓




突出




QToolbar中最适合用于突出设计的用例之一:




无边界

borderless设计使您可以将QField无缝集成到其他组件中,而无需QField在其周围绘制边框或更改其背景颜色:




圆形设计

如以下示例所示,rounded属性仅可与实心、轮廓和突出设计一起使用:




方形边框

如以下示例所示,square属性仅可与实心、轮廓和突出设计一起使用:




黑暗背景




基本特性

可清除

作为辅助,您可以使用clearable属性,以便用户可以通过附加的图标将模型重置为null

WARNING

如果使用clearable,则必须使用v-model或侦听@update:model-value并更新值。




控件类型

您在control插槽中放置的所有内容都将用作该字段的内容。 我们在下面提供一些控件示例。




TIP

大多数表单控件总是使某些内容可见,因此,如果您使用的是label,则可能需要将其与stack-label一起设置,否则标签将与封闭的控件重叠。

前缀和后缀




标签自定义

使用label槽可以自定义标签的方位或添加特殊功能如QTooltip

TIP

别忘了设置label-slot属性。

如果要与标签(QTooltip)的内容交互,请在插槽中的元素上添加all-pointer-events类。




QBtn类型为“submit”的插槽

WARNING

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

加载状态




验证

内部验证

您可以使用:rulegs属性来验证QField组件。 指定嵌入式规则数组或您自己的验证器。 您的自定义验证器将是一个函数,如果验证器成功,它将返回true,否则将返回带有错误消息的String

TIP

默认情况下,由于性能原因,规则的更改在模型更改之前不会触发新的验证。为了在规则发生变化时触发验证,请使用reactive-rules布尔属性。缺点是性能下降(所以在你真正需要的时候使用它!)。通过使用计算属性作为规则的值(而不是在vue模板中内联指定它们),可以稍微减轻这种情况。

这样,您就可以编写方便的形状规则,例如:

value => condition || errorMessage

例如:

value => value < 10 || 'Value should be lower'

您可以通过在QField上调用resetValidation()方法来重置验证。







如果设置了lazy-rules,则验证在第一次失去焦点之后开始。如果lazy-rules设置为ondemand 字符串,则只有在手动调用组件的validate()方法或包装器QForm提交自身时才会触发验证。




异步规则

通过使用async/await或直接返回Promise,规则也可以是异步的。

TIP

考虑将异步规则与debounce属性结合使用,以避免在每次击键时立即调用异步规则,这可能会对性能造成不利影响。




外部验证

您还可以使用外部验证,并且仅传递errorerror-message(启用bottom-slots以显示此错误消息)。

TIP

根据您的需要,您可以将Vuelidate(我们推荐的方法)或其他一些验证库连接到QField。




您还可以自定义错误消息的插槽: