QField 组件用于为表单组件提供通用功能和外观。它使用 :model-value（如果您想使用 clearable 属性，则使用 v-model）来了解内部组件的模型。它支持标签、提示、错误、验证，并提供各种样式和颜色。
QField 允许您在其内部显示任何表单控件（实际上几乎任何内容）。只需将您所需的内容放在 control 插槽中。
警告
不要用 QField 包裹 QInput、QFile 或 QSelect，因为这些组件已经继承了 QField。
设计
提示
下面的示例使用虚拟内容（文本）来向您展示 QField 可以使用的设计。要查看包装真实组件的示例，请参阅“基本功能”部分。
警告
QField 不会（也不应该）管理您的 control 插槽，因此如果您使用 label 属性，最好也指定 stack-label，否则当 QField 未获得焦点时，它可能会与您的控件重叠。
概述
对于您的 QField，您只能使用一种主要设计（filled、outlined、standout、borderless）。您不能使用多种，因为它们是互斥的。
着色
标准
填充
轮廓
突出
突出显示设计最合适的用例之一是在 QToolbar 中
无边框
borderless 设计允许您将 QField 无缝集成到其他组件中，而无需 QField 在其周围绘制边框或更改其背景颜色
圆角设计
rounded 属性仅与填充、轮廓和突出显示设计一起使用，如下面的示例所示
方形边框
square 属性仅与填充、轮廓和突出显示设计一起使用，如下面的示例所示
强制暗模式
基本功能
可清除
作为辅助功能，您可以使用 clearable 属性，以便用户可以通过附加的图标将模型重置为 null。
警告
如果使用 clearable，则必须使用 v-model 或侦听 @update:model-value 并更新值。
控件类型
您在 control 插槽中放置的任何内容都将用作字段的内容。我们在下面提供了一些控件示例。
提示
大多数表单控件始终呈现一些可见内容，因此如果您使用 label，则可能希望将其与 stack-label 一起设置，否则标签将与封闭的控件重叠。
前缀和后缀
自定义标签
使用 label 插槽，您可以自定义标签的外观或添加特殊功能，如 QTooltip。
提示
不要忘记设置 label-slot 属性。
如果您想与标签（QTooltip）的内容交互，请在插槽中的元素上添加 all-pointer-events 类。
带有 QBtn 类型“提交”的插槽
警告
当在 QField、QInput 或 QSelect 的“before”、“after”、“prepend”或“append”插槽之一中放置类型为“submit”的 QBtn 时，还应在相关的 QBtn 上添加 @click 侦听器。此侦听器应调用提交表单的方法。此类插槽中的所有“click”事件都不会传播到其父元素。
加载状态
验证
内部验证
您可以使用 :rules 属性验证 QField 组件。指定嵌入规则数组或您自己的验证器。您的自定义验证器将是一个函数，如果验证器成功则返回 true，如果验证器失败则返回带有错误消息的 String。
提示
默认情况下，出于性能原因，规则的更改不会触发新的验证，直到模型更改。为了在规则更改时也触发验证，请使用 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。
提示
考虑将异步规则与 debounce 属性结合使用，以避免在每次按键时立即调用异步规则，这可能会损害性能。
外部验证
您也可以使用外部验证，并且只传递 error 和 error-message（启用 bottom-slots 以显示此错误消息）。
提示
根据您的需要，您可以将 Vuelidate（我们推荐的方法）或其他一些验证库连接到 QField。
您还可以自定义错误消息的插槽