数字输入框

数字输入框是一个提供数值输入的输入组件。

导入 # 


import InputNumber from 'primevue/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 />

表单 #

数字输入框与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 标准定义currency属性，例如美元的“USD”。


<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>

尺寸 #

数字输入框提供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 提供