QInput 元件用於擷取使用者的文字輸入。它使用 v-model，類似於一般的輸入欄位。它支援錯誤和驗證，並提供多種樣式、色彩和類型。

設計

色彩

標準

填滿

外框

突出

突出設計最適合的使用案例之一是在 QToolbar 中

無邊框

borderless 設計讓您可以將 QInput 無縫整合到其他元件中，而無需 QInput 在自身周圍繪製邊框或變更其背景色彩

圓角設計

rounded 屬性僅適用於填滿、外框和突出設計，如下例所示

方角邊框

square 屬性僅適用於填滿、外框和突出設計，如下例所示

強制暗黑模式

基本功能

原生屬性

設定在 QInput 上的所有屬性，若不在 API 的 props 列表中，都將傳遞至原生欄位 (input 或 textarea)。例如：autocomplete、placeholder。

請查看這些資源，以取得關於原生屬性的更多資訊 (關於 input 也請查看每個類型的特定屬性)

• input
• textarea

可清除

作為輔助功能，您可以使用 clearable 屬性，讓使用者可以透過附加的圖示將模型重設為 null。以下範例中的第二個 QInput 等同於使用 clearable。

輸入類型

以下 QInput 使用 type 屬性，以便在其中呈現原生等效的 <input type="...">。

數字類型輸入

您將搭配 type="number" 屬性使用 v-model.number (請注意 number 修飾符)

檔案類型輸入

文字區域

當您需要 QInput 隨著其內容增長時，請使用 autogrow 屬性，如下例所示

前綴和後綴

自訂標籤

使用 label 插槽，您可以自訂標籤的外觀或新增特殊功能，例如 QTooltip。

陰影文字

具有 QBtn 類型 “submit” 的插槽

模型去抖動

當您監看模型並對其執行耗時的操作時，去抖動的作用就顯現出來了。因此，您希望先讓使用者輸入完成，然後再觸發模型更新，而不是在每次按鍵時都更新模型。

載入狀態

遮罩

您可以借助 mask 屬性強制/協助使用者輸入特定格式。

以下是遮罩符號

QInput mask 屬性有輔助程式：完整列表。您可以為了方便起見使用這些 (範例：“phone”、“card”)，或撰寫字串以指定您的自訂需求。

如果您想要強制使用者輸入某種格式，但又希望模型包含原始值，則 unmasked-value 非常有用

如果您想要強制使用者從結尾填寫遮罩，並允許輸入非固定長度，則 reverse-fill-mask 非常有用

使用第三方遮罩處理器

您可以透過對 QInput 進行一些小調整，輕鬆使用任何第三方遮罩處理器。

從像這樣的 QInput 開始

<q-input
  filled
  v-model="price"
  label="Price with 2 decimals"
  mask="#.##"
  fill-mask="#"
  reverse-fill-mask
  hint="Mask: #.00"
  input-class="text-right"
/>

您可以使用 v-money 指令

<q-field
  filled
  v-model="price"
  label="Price with v-money directive"
  hint="Mask: $ #,###.00 #"
>
  <template v-slot:control="{ id, floatingLabel, modelValue, emitValue }">
    <input :id="id" class="q-field__input text-right" :value="modelValue" @change="e => emitValue(e.target.value)" v-money="moneyFormatForDirective" v-show="floatingLabel">
  </template>
</q-field>

moneyFormatForDirective: {
  decimal: '.',
  thousands: ',',
  prefix: '$ ',
  suffix: ' #',
  precision: 2,
  masked: false /* doesn't work with directive */
}

或者您可以使用 money 元件

<q-field
  filled
  v-model="price"
  label="Price with v-money component"
  hint="Mask: $ #,###.00 #"
>
  <template v-slot:control="{ id, floatingLabel, modelValue, emitValue }">
    <money :id="id" class="q-field__input text-right" :model-value="modelValue" @update:model-value="emitValue" v-bind="moneyFormatForComponent" v-show="floatingLabel" />
  </template>
</q-field>

moneyFormatForComponent: {
  decimal: '.',
  thousands: ',',
  prefix: '$ ',
  suffix: ' #',
  precision: 2,
  masked: true
}

驗證

內部驗證

您可以使用 :rules 屬性驗證 QInput 元件。指定內嵌規則或您自己的驗證器陣列。您的自訂驗證器將是一個函式，如果驗證器成功，則傳回 true，如果失敗，則傳回帶有錯誤訊息的 String。

這樣您就可以撰寫形狀像這樣的方便規則

value => condition || errorMessage

例如

value => value.includes('Hello') || 'Field must contain word Hello'

您可以透過呼叫 QInput 上的 resetValidation() 方法來重設驗證。

QInput rules 屬性有輔助程式：完整列表。您可以為了方便起見使用這些 (範例：“date”、“time”、“hexColor”、“rgbOrRgbaColor”、“anyColor”)，或撰寫字串以指定您的自訂需求。

如果您設定 lazy-rules，則驗證會在第一次失焦後開始。如果 lazy-rules 設定為 ondemand String，則驗證只會在手動呼叫元件的 validate() 方法或包裝器 QForm 自行提交時觸發。

非同步規則

規則也可以是非同步的，方法是使用 async/await 或直接傳回 Promise。

外部驗證

您也可以使用外部驗證，並且僅傳遞 error 和 error-message (啟用 bottom-slots 以顯示此錯誤訊息)。

您也可以自訂錯誤訊息的插槽

原生表單提交

當處理具有 action 和 method 的原生表單時 (例如，當搭配 ASP.NET 控制器使用 Quasar 時)，您需要在 QInput 上指定 name 屬性，否則 formData 將不會包含它 (如果應該包含)