QField 组件为表单控件提供了一个容器，它支持标签、验证、错误状态等功能。它使用 :model-value（或者如果您想使用 clearable 属性，则使用 v-model）来了解内部组件的模型。它支持标签、提示、错误、验证，并提供各种样式和颜色。
QField 允许您在其中显示任何表单控件（或者实际上几乎任何内容）。只需将您想要的内容放在 control 插槽中即可。
WARNING
不要用 QField 包装 QInput、QFile 或 QSelect，因为这些组件已经继承了 QField。
设计
TIP
下面的示例使用简单的文本内容只是为了向您展示 QField 可以使用的外观设计。要查看封装真实组件的示例，请参见"基本功能"部分。
WARNING
QField 不会（也不应该）管理您的 control 插槽内容，所以如果您在使用 label 属性，那么最好也声明一下 stack-label 属性，否则，当 QField 未聚焦时，它可能会与您的控件重叠。
概览
您只能给 QField 使用一种主要的外观设计款式（filled、outlined、standout、borderless），不能使用多个，因为它们是互相排斥的。
颜色定制
标准样式
填充样式
轮廓样式
突出样式
其中一个很合适的用例就是将突出样式的 QField 用在 QToolbar 中：
无边框
无边框（borderless）设计允许您无缝地将 QField 集成到其他组件中，而无需 QField 在其周围绘制边框或更改其背景颜色：
圆角设计
圆形（rounded）属性只能与填充、轮廓和突出的设计（Filled、Outlined 和 Standout）一起工作，如下面的例子所示：
方形边框
方形（square）属性只能与填充、轮廓和突出的设计（Filled、Outlined 和 Standout）一起工作，如下面的例子所示：
强制暗色模式
基本功能
可清除
作为辅助，您可以使用 clearable 属性，这样用户可以通过附加的图标将数据重置为 null。
WARNING
如果使用 clearable 那么您必须使用 v-model 或者监听 @update:model-value 事件并更新其值。
控件类型
任何您放置在 control 插槽中的内容，都会作为 QField 组件的内容展示。我们提供了一些示例：
TIP
大部分的表单控件都是可见的，所以如果您在使用 label 属性，那么最好也声明一下 stack-label 属性，否则，当 QField 未聚焦时，它可能会与您的控件重叠。
前缀和后缀
自定义标签
使用 label 插槽可以自定义标签或使用 QTooltip 添加特殊功能。
TIP
不要忘记设置 label-slot 属性。
如果要与标签（QTooltip）的内容交互，请在插槽中的元素上添加 all-pointer-events CSS 类。
带有 type=“submit” 的 QBtn 插槽
WARNING
当在 QField、QInput 或 QSelect 的"before"、“after”、"prepend"或"append"插槽中放置 type=“submit” 的 QBtn 时，您还应该在相关的 QBtn 上添加 @click 监听器。此监听器应调用提交表单的方法。此类插槽中的所有"click"事件都不会传播到其父元素。
加载状态
验证
内部验证
您可以使用 :rules 属性来验证 QField 组件。指定内置规则数组或自定义验证器。自定义验证器是一个函数，如果验证成功则返回 true，如果失败则返回带有错误信息的字符串。
TIP
默认情况下，出于性能考虑，规则的更改不会触发新的验证，直到模型发生变化。如果您希望在规则更改时也触发验证，请使用 reactive-rules 布尔属性。缺点是会有性能损失（所以只在真正需要时才使用！），可以通过使用计算属性作为规则的值（而不是在 vue 模板中内联指定）来稍微缓解这个问题。
这样您就可以编写如下形式的便捷规则：
(value) => condition || errorMessage;例如：
(value) => value < 10 || "值应该小于10";您可以通过调用 QField 的 resetValidation() 方法来重置验证。
如果您设置了 lazy-rules，验证将在首次失焦后开始。如果 lazy-rules 设置为 ondemand 字符串，则验证只会在手动调用组件的 validate() 方法或包装的 QForm 提交自身时触发。
异步规则
规则也可以是异步的，通过使用 async/await 或直接返回 Promise。
TIP
建议将异步规则与 debounce 属性结合使用，以避免在每次按键时立即调用异步规则，这可能会影响性能。
外部验证
您也可以使用外部验证，只需传递 error 和 error-message（启用 bottom-slots 以显示此错误消息）。
TIP
根据您的需求，您可以将 Regle（我们推荐的方法）或其他验证库连接到 QField。
您还可以自定义错误消息的插槽：