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)。您不能使用多個，因為它們是互斥的。
色彩
標準
填滿
外框
突出
Standout 設計最適合的使用案例之一是在 QToolbar 中
無邊框
borderless 設計允許您將 QField 無縫整合到其他元件中，而無需 QField 在自身周圍繪製邊框或更改其背景顏色
圓角設計
rounded 屬性僅適用於 Filled、Outlined 和 Standout 設計，如下面的範例所示
方形邊框
square 屬性僅適用於 Filled、Outlined 和 Standout 設計，如下面的範例所示
強制暗黑模式
基本功能
可清除
作為輔助工具，您可以使用 clearable 屬性，讓使用者可以透過附加的圖示將模型重設為 null。
警告
如果使用 clearable，您必須使用 v-model 或監聽 @update:model-value 並更新值。
控制項類型
您放置在 control 插槽中的任何內容都將用作欄位的內容。我們在下面提供了一些控制項範例。
提示
大多數表單控制項總是呈現可見的東西，因此如果您使用 label，則可能需要將其與 stack-label 一起設定，否則標籤將與封閉的控制項重疊。
前綴和後綴
自訂標籤
使用 label 插槽，您可以自訂標籤的外觀或新增 QTooltip 等特殊功能。
提示
別忘了設定 label-slot 屬性。
如果您想與標籤 (QTooltip) 的內容互動，請在插槽中的元素上新增 all-pointer-events 類別。
具有 “submit” 類型的 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。
您也可以自訂錯誤訊息的插槽