QField 组件用于为表单组件提供常用功能和方面。它使用 :model-value（如果要使用 clearable 属性，则使用 v-model）来了解内部组件的模型。它支持标签、提示、错误和验证，并提供多种样式和颜色。
¥The QField component is used to provide common functionality and aspect to form components. It uses :model-value (or v-model if you want to use clearable property) to have knowledge of the model of the component inside. It has support for labels, hints, errors, validation, and comes in a variety of styles and colors.
QField 允许你在其中显示任何表单控件（实际上几乎任何内容）。只需将你想要的内容放在 control 位置即可。
¥QField allows you to display any form control (or almost anything as a matter of fact) inside it. Just place your desired content inside the control slot.
危险
请勿使用 QField 封装 QInput、QFile 或 QSelect，因为这些组件已经继承了 QField。
¥Do NOT wrap QInput, QFile or QSelect with QField as these components already inherit QField.
设计(Design)
¥Design
提示
以下示例使用纯文本内容只是为了向你展示 QField 可以使用的设计。如需查看封装真实组件的示例，请参阅 “基本功能” 部分。
¥The examples below use dumb content (text) just to show you the design that QField can use. For checking out examples that wrap real components, see the “Basic Features” section.
危险
QField 不（也不应该）管理你的 control 插槽，因此如果你使用 label 属性，最好也指定 stack-label，否则当 QField 未获得焦点时，它可能会与你的控件重叠。
¥QField does not (and should not) manage your control slot, so if you use label prop, it might be a good idea to also specify stack-label, otherwise it might overlap your control when QField is not focused.
概述(Overview)
¥Overview
对于你的 QField，你只能使用主要设计之一（filled、outlined、standout、borderless）。你不能使用多个边距，因为它们是自独占的。
¥For your QField you can use only one of the main designs (filled, outlined, standout, borderless). You cannot use multiple as they are self-exclusive.
着色(Coloring)
¥Coloring
标准式(Standard)
¥Standard
已填充(Filled)
¥Filled
概述(Outlined)
¥Outlined
突出式(Standout)
¥Standout
Standout 设计最合适的用例之一是 QToolbar：
¥One of the most appropriate use cases for Standout design is in a QToolbar:
无边框(Borderless)
¥Borderless
borderless 设计允许你将 QField 无缝集成到其他组件中，而无需 QField 在自身周围绘制边框或更改其背景颜色：
¥The borderless design allows you to seamlessly integrate your QField into other components without QField drawing a border around itself or changing its background color:
圆角设计(Rounded design)
¥Rounded design
rounded 属性仅与 Filled、Outlined 和 Standout 设计一起使用，如下例所示：
¥The rounded prop only works along with Filled, Outlined and Standout designs, as showcased in the example below:
方形边框(Square borders)
¥Square borders
square 属性仅与 Filled、Outlined 和 Standout 设计一起使用才有意义，如下例所示：
¥The square prop only makes sense along with Filled, Outlined and Standout designs, as showcased in the example below:
强制暗黑模式(Force dark mode)
¥Force dark mode
基本功能(Basic features)
¥Basic features
可清除(Clearable)
¥Clearable
作为辅助，你可以使用 clearable 属性，以便用户可以通过附加图标将模型重置为 null。
¥As a helper, you can use clearable prop so user can reset model to null through an appended icon.
警告
如果使用 clearable，则必须使用 v-model 或监听 @update:model-value 并更新值。
¥If using clearable you must use v-model or listen on @update:model-value and update the value.
控件类型(Control types)
¥Control types
你在 control 字段中输入的任何内容都将用作该字段的内容。我们在下面提供了一些控件示例。
¥Anything you place inside the control slot will be used as content of the field. We provide a few examples of controls below.
提示
大多数表单控件始终会渲染可见的内容，因此如果你使用 label，则可能需要将其与 stack-label 一起设置，否则标签将与封闭的控件重叠。
¥Most of the form controls always render something visible, so you if you’re using a label then you might want to set it along with stack-label, otherwise the label will overlap the enclosed control.
前缀和后缀(Prefix and suffix)
¥Prefix and suffix
自定义标签(Custom Label)
¥Custom Label
使用 label 插槽，你可以自定义标签的外观或添加类似 QTooltip 的特殊功能。
¥Using the label slot you can customize the aspect of the label or add special features as QTooltip.
提示
不要忘记设置 label-slot 属性。
¥Do not forget to set the label-slot property.
如果你想与标签（QTooltip）的内容进行交互，请在插槽中的元素上添加 all-pointer-events 类。
¥If you want to interact with the content of the label (QTooltip) add the all-pointer-events class on the element in the slot.
QBtn 类型为 “submit” 的插槽(Slots with QBtn type “submit”)
¥Slots with QBtn type “submit”
警告
当将类型为 “submit” 的 QBtn 放置在 QField、QInput 或 QSelect 的 “before”、“after”、“prepend” 或 “append” 插槽之一中时，你还应该在该 QBtn 上添加一个 @click 监听器。此监听器应调用提交表单的方法。此类插槽中的所有 “click” 事件都不会传播到其父元素。
¥When placing a QBtn with type “submit” in one of the “before”, “after”, “prepend”, or “append” slots of a QField, QInput or QSelect, you should also add a @click listener on the QBtn in question. This listener should call the method that submits your form. All “click” events in such slots are not propagated to their parent elements.
加载状态(Loading state)
¥Loading state
验证(Validation)
¥Validation
内部验证(Internal validation)
¥Internal validation
你可以使用 :rules 属性验证 QField 组件。指定嵌入规则数组或你自己的验证器。你的自定义验证器将是一个函数，如果验证器成功，则返回 true；如果验证器失败，则返回带有错误消息的 String。
¥You can validate QField components with :rules prop. Specify array of embedded rules or your own validators. Your custom validator will be a function which returns true if validator succeeds or String with error message if it doesn’t succeed.
提示
默认情况下，出于性能原因，规则的更改不会触发新的验证，直到模型发生变化为止。为了在规则也发生变化时触发验证，请使用 reactive-rules 布尔属性。缺点是性能会受到影响（所以只在真正需要时才使用它！），可以通过使用计算属性作为规则的值（而不是在 Vue 模板中内联指定它们）稍微缓解这个问题。
¥By default, for perf reasons, a change in the rules does not trigger a new validation until the model changes. In order to trigger the validation when rules change too, then use reactive-rules Boolean prop. The downside is a performance penalty (so use it when you really need this only!) and it can be slightly mitigated by using a computed prop as value for the rules (and not specify them inline in the vue template).
这样你就可以编写便捷的形状规则，例如：
¥This is so you can write convenient rules of shape like:
value => condition || errorMessage例如：
¥For example:
value => value < 10 || 'Value should be lower'你可以通过在 QField 上调用 resetValidation() 方法来重置验证。
¥You can reset the validation by calling resetValidation() method on the QField.
如果你设置了 lazy-rules，则验证将在第一次模糊后开始。如果 lazy-rules 设置为 ondemand 字符串，则仅在手动调用组件的 verify() 方法或封装器 QForm 自行提交时才会触发验证。
¥If you set lazy-rules, validation starts after first blur. If lazy-rules is set to ondemand String, then validation will be triggered only when component’s validate() method is manually called or when the wrapper QForm submits itself.
异步规则(Async rules)
¥Async rules
规则也可以是异步的，通过使用 async/await 或直接返回 Promise。
¥Rules can be async too, by using async/await or by directly returning a Promise.
提示
考虑将异步规则与 debounce 属性结合使用，以避免每次按键时立即调用异步规则，这可能会影响性能。
¥Consider coupling async rules with debounce prop to avoid calling the async rules immediately on each keystroke, which might be detrimental to performance.
外部验证(External validation)
¥External validation
你还可以使用外部验证，并且只传递 error 和 error-message（启用 bottom-slots 以显示此错误消息）。
¥You can also use external validation and only pass error and error-message (enable bottom-slots to display this error message).
提示
根据你的需求，你可以将 Regle（我们推荐的方法）或其他验证库连接到 QField。
¥Depending on your needs, you might connect Regle (our recommended approach) or some other validation library to QField.
你还可以自定义错误消息的插槽：
¥You can also customize the slot for error message: