輸入數字

InputNumber 是一個提供數值輸入的輸入元件。

匯入 # 


import InputNumber from 'primevue/inputnumber';

數值 #

InputNumber 使用 v-model 屬性進行雙向數值綁定。


<InputNumber v-model="value1" inputId="integeronly" fluid />
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />

表單 #

InputNumber 與 PrimeVue 表單程式庫無縫整合。


<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
    <div class="flex flex-col gap-1">
        <InputNumber name="amount" fluid />
        <Message v-if="$form.amount?.invalid" severity="error" size="small" variant="simple">{{ $form.amount.error?.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

地區設定 #

群組和十進位符號等本地化資訊是使用 locale 屬性定義，預設為使用者地區設定。


<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />

貨幣 #

貨幣值是透過將 mode 屬性設定為 currency 來啟用。在此設定中，也需要使用 ISO 4217 標準 (例如，美元的 "USD") 定義 currency 屬性。


<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
<InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" />
<InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />

前綴 & 後綴 #

可以使用 prefix 和 suffix 屬性將自訂文字 (例如單位) 放在輸入部分之前或之後。


<InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
<InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
<InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />

按鈕 #

可以使用 showButtons 屬性啟用微調按鈕，並使用 buttonLayout 定義版面配置。


<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
    <template #incrementbuttonicon>
        <span class="pi pi-plus" />
    </template>
    <template #decrementbuttonicon>
        <span class="pi pi-minus" />
    </template>
</InputNumber>

垂直 #

也可以將按鈕垂直放置，方法是將 buttonLayout 設定為 vertical。


<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
    <template #incrementbuttonicon>
        <span class="pi pi-plus" />
    </template>
    <template #decrementbuttonicon>
        <span class="pi pi-minus" />
    </template>
</InputNumber>

填滿 #

將 variant 屬性指定為 filled，以使用比預設 outlined 樣式更高的視覺強調顯示元件。


<InputNumber v-model="value" variant="filled" />

浮動標籤 #

當聚焦時，浮動標籤會出現在輸入欄位的頂部。如需詳細資訊，請造訪 浮動標籤 文件。


<FloatLabel>
    <InputNumber v-model="value1" inputId="over_label" mode="currency" currency="USD" locale="en-US" />
    <label for="over_label">Over Label</label>
</FloatLabel>

<FloatLabel variant="in">
    <InputNumber v-model="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" variant="filled" />
    <label for="in_label">In Label</label>
</FloatLabel>

<FloatLabel variant="on">
    <InputNumber v-model="value3" inputId="on_label" mode="currency" currency="USD" locale="en-US" />
    <label for="on_label">On Label</label>
</FloatLabel>

Ifta 標籤 #

IftaLabel 用於建立內嵌頂部對齊的標籤。如需詳細資訊，請造訪 IftaLabel 文件。


<IftaLabel>
    <InputNumber v-model="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" variant="filled" />
    <label for="price_input">Price</label>
</IftaLabel>

尺寸 #

InputNumber 提供 small 和 large 尺寸作為基本尺寸的替代方案。


<InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
<InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
<InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />

無效 #

無效狀態是使用 invalid 屬性顯示，以指出驗證失敗。當與表單驗證程式庫整合時，可以使用此樣式。


<InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
<InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />

已停用 #

當存在 disabled 時，無法編輯和聚焦元素。


<InputNumber v-model="value" disabled prefix="%" />

協助工具 #

螢幕閱讀器

描述元件的值可以透過 label 標籤與 inputId 屬性結合提供，或使用 aria-labelledby、aria-label 屬性提供。輸入元素除了 aria-valuemin、aria-valuemax 和 aria-valuenow 屬性之外，還會使用 spinbutton 角色。


<label for="price">Price</label>
<InputNumber inputId="price" />

<span id="label_number">Number</span>
<InputNumber aria-labelledby="label_number" />

<InputNumber aria-label="Number" />

鍵盤支援

按鍵功能
tab將焦點移至輸入欄位。
向上箭頭增加值。
向下箭頭減少值。
home如果提供，則設定最小值。
end如果提供，則設定最大值。
PrimeVue 4.2.5 於 Vue 3，由 PrimeTek 提供