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属性结合使用，以避免在每次击键时立即调用异步规则，这可能会对性能造成不利影响。
外部验证
您还可以使用外部验证，并且仅传递error和error-message（启用bottom-slots以显示此错误消息）。
TIP
根据您的需要，您可以将Vuelidate（我们推荐的方法）或其他一些验证库连接到QField。
您还可以自定义错误消息的插槽：