数字输入框 - Semi Design Next

使用场景

当需要获取一个标准数值时。

代码演示

如何引入

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';
</script>

基本输入框

简单数字输入框

设置了步长 step=2

设置 shiftStep=100，按住 shift 同时点击按钮，可以一次增加/减少100

设置了上下界 min=1,max=10

代码

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div style="width: 280px">
        <span id="inputnumber-basic-simple">简单数字输入框</span>
        <InputNumber aria-labelledby="inputnumber-basic-simple" />
        <br />
        <br />

        <span id="inputnumber-basic-step">设置了步长 step=2 </span>
        <InputNumber aria-labelledby="inputnumber-basic-step" :step="2" />
        <br />
        <br />

        <span id="inputnumber-basic-shift-step">设置 shiftStep=100， 按住 shift 同时点击按钮，可以一次增加/减少100 </span>
        <InputNumber aria-labelledby="inputnumber-basic-shift-step" :shiftStep="100" />
        <br />
        <br />

        <span id="inputnumber-basic-range">设置了上下界 min=1,max=10</span>
        <InputNumber aria-labelledby="inputnumber-basic-range" :defaultValue="1" :max="10" :min="1" />
        <br />
        <br />
    </div>
</template>

设置了默认值 defaultValue=1

禁用 disabled=true

设置了小数位数 precision=2

设置了 innerButtons=true

小时

代码

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div style="width: 280px">
        <span id="inputnumber-basic-more-default-value">设置了默认值 defaultValue=1 </span>
        <InputNumber aria-labelledby="inputnumber-basic-more-default-value" :defaultValue="1" />
        <br />
        <br />

        <span id="inputnumber-basic-more-disabled">禁用 disabled=true</span>
        <InputNumber aria-labelledby="inputnumber-basic-more-disabled" :defaultValue="2" disabled />
        <br />
        <br />

        <span id="inputnumber-basic-more-precision">设置了小数位数 precision=2 </span>
        <InputNumber aria-labelledby="inputnumber-basic-more-precision" :defaultValue="1.234" :precision="2" />
        <br />
        <br />

        <span id="inputnumber-basic-more-inner-buttons">设置了 innerButtons=true </span>
        <InputNumber aria-labelledby="inputnumber-basic-more-inner-buttons" :defaultValue="1" innerButtons style="width: 190px">
            <template #suffix>小时</template>
        </InputNumber>
        <br />
    </div>
</template>

隐藏步进器

通过innerButtons，你可以将右侧的步进器隐藏进内部，仅hover时才会显示

代码

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';
</script>

<template>
    <InputNumber aria-label="Number with inner buttons" innerButtons style="width: 190px" />
</template>

innerButtons 的按钮在悬停或聚焦时临时替换 #suffix 插槽，之后恢复原内容。

hideButtons设为true，彻底隐藏步进器

代码

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';
</script>

<template>
    <InputNumber aria-label="Number without buttons" hideButtons style="width: 190px" />
</template>

尺寸

默认尺寸 size=default

大尺寸 size=large

小尺寸 size=small

代码

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div style="width: 180px">
        <span id="inputnumber-size-default">默认尺寸 size=default</span>
        <InputNumber aria-labelledby="inputnumber-size-default" />
        <br />
        <br />

        <span id="inputnumber-size-large">大尺寸 size=large</span>
        <InputNumber aria-labelledby="inputnumber-size-large" size="large" />
        <br />
        <br />

        <span id="inputnumber-size-small">小尺寸 size=small</span>
        <InputNumber aria-labelledby="inputnumber-size-small" size="small" />
        <br />
    </div>
</template>

自定义显示格式与解析方式

formatter 和 parser 一对方法，一般需要同时设置，否则无法正确解析值

人民币

自定义串

代码

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';

    const log = (v: number | string) => {
        console.log(`Changed to: [${typeof v}] ${v}`);
    };

    const formatRmb = (value: number | string) => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    const parseRmb = (value: string) => value.replace(/￥\s?|(,*)/g, '');
    const formatCustom = (value: number | string) => String(value).split('').join('-');
    const parseCustom = (value: string) => value.replace(/-/g, '');
</script>

<template>
    <div style="width: 180px">
        <span id="inputnumber-formatter-rmb">人民币</span>
        <InputNumber aria-labelledby="inputnumber-formatter-rmb" :defaultValue="1000" :formatter="formatRmb" :min="0" :parser="parseRmb" @change="log" />
        <br />
        <br />

        <span id="inputnumber-formatter-custom">自定义串</span>
        <InputNumber aria-labelledby="inputnumber-formatter-custom" :defaultValue="1111" :formatter="formatCustom" :parser="parseCustom" @change="log" />
        <br />
    </div>
</template>

纯数字输入框

搭配 formatter 和 onNumberChange（Vue 为 numberChange 事件）可以实现纯数字输入框。

代码

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';

    const formatInteger = (value: number | string) => `${value}`.replace(/\D/g, '');
    const log = (number: number) => console.log(number);
</script>

<template>
    <InputNumber aria-label="Integer" :formatter="formatInteger" :max="Number.MAX_SAFE_INTEGER" :min="0" @numberChange="log" />
</template>

货币展示

国际化模式下通过 currency={true}（Vue 中写 currency）开启，组件会自动根据 localeCode 展示对应货币种类。（注意切换语言类型后需要更新组件 key 值）

代码

<script setup lang="ts">
    import { ref } from 'vue';
    import ar from '@fibrous/semi-foundation/locale/source/ar';
    import de from '@fibrous/semi-foundation/locale/source/de';
    import en_GB from '@fibrous/semi-foundation/locale/source/en_GB';
    import en_US from '@fibrous/semi-foundation/locale/source/en_US';
    import es from '@fibrous/semi-foundation/locale/source/es';
    import fr from '@fibrous/semi-foundation/locale/source/fr';
    import id_ID from '@fibrous/semi-foundation/locale/source/id_ID';
    import it from '@fibrous/semi-foundation/locale/source/it';
    import ja_JP from '@fibrous/semi-foundation/locale/source/ja_JP';
    import ko_KR from '@fibrous/semi-foundation/locale/source/ko_KR';
    import ms_MY from '@fibrous/semi-foundation/locale/source/ms_MY';
    import nl_NL from '@fibrous/semi-foundation/locale/source/nl_NL';
    import pl_PL from '@fibrous/semi-foundation/locale/source/pl_PL';
    import pt_BR from '@fibrous/semi-foundation/locale/source/pt_BR';
    import ro from '@fibrous/semi-foundation/locale/source/ro';
    import ru_RU from '@fibrous/semi-foundation/locale/source/ru_RU';
    import sv_SE from '@fibrous/semi-foundation/locale/source/sv_SE';
    import th_TH from '@fibrous/semi-foundation/locale/source/th_TH';
    import tr_TR from '@fibrous/semi-foundation/locale/source/tr_TR';
    import vi_VN from '@fibrous/semi-foundation/locale/source/vi_VN';
    import zh_CN from '@fibrous/semi-foundation/locale/source/zh_CN';
    import zh_TW from '@fibrous/semi-foundation/locale/source/zh_TW';
    import { InputNumber, LocaleProvider, Select } from '@fibrous/semi-ui-vue';

    const languages = {
        zh_CN,
        en_GB,
        en_US,
        ko_KR,
        ja_JP,
        ar,
        vi_VN,
        ru_RU,
        id_ID,
        ms_MY,
        th_TH,
        tr_TR,
        pt_BR,
        zh_TW,
        es,
        sv_SE,
        pl_PL,
        nl_NL,
        de,
        it,
        fr,
        ro,
    };

    const locale = ref<(typeof languages)[keyof typeof languages]>(zh_CN);
    const localeCode = ref('zh_CN');

    const onLanguageChange = (code?: string | number) => {
        if (typeof code !== 'string') {
            return;
        }
        locale.value = languages[code as keyof typeof languages];
        localeCode.value = code;
    };
</script>

<template>
    <div style="padding-bottom: 20px">
        <Select aria-label="切换语言" defaultValue="zh_CN" style="width: 250px" @change="onLanguageChange">
            <template #insetLabel>切换语言</template>
            <Select.Option value="zh_CN">简体中文</Select.Option>
            <Select.Option value="en_US">英语（美）</Select.Option>
            <Select.Option value="en_GB">英语（英）</Select.Option>
            <Select.Option value="ja_JP">日语</Select.Option>
            <Select.Option value="ko_KR">韩语</Select.Option>
            <Select.Option value="ar">阿拉伯语</Select.Option>
            <Select.Option value="vi_VN">越南语</Select.Option>
            <Select.Option value="ru_RU">俄罗斯语</Select.Option>
            <Select.Option value="id_ID">印尼语</Select.Option>
            <Select.Option value="ms_MY">马来语</Select.Option>
            <Select.Option value="th_TH">泰语</Select.Option>
            <Select.Option value="tr_TR">土耳其语</Select.Option>
            <Select.Option value="pt_BR">葡萄牙语（巴西）</Select.Option>
            <Select.Option value="zh_TW">繁体中文</Select.Option>
            <Select.Option value="es">西班牙语</Select.Option>
            <Select.Option value="de">德语</Select.Option>
            <Select.Option value="it">意大利语</Select.Option>
            <Select.Option value="fr">法语</Select.Option>
            <Select.Option value="ro">罗马尼亚语</Select.Option>
            <Select.Option value="sv_SE">瑞典语</Select.Option>
            <Select.Option value="pl_PL">波兰语</Select.Option>
            <Select.Option value="nl_NL">荷兰语</Select.Option>
        </Select>
    </div>
    <LocaleProvider :locale="locale">
        <InputNumber :key="localeCode" aria-label="金额" currency :defaultValue="123456.78" />
    </LocaleProvider>
</template>

也可以通过手动传 localeCode 和 currency 指定展示的货币种类

🇨🇳 人民币

🇪🇺 欧元

🇯🇵 日元

🇻🇳 越南盾

代码

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';

    const defaultValue = 123456.78;
</script>

<template>
    <div>
        <div id="inputnumber-currency-locale-cny">🇨🇳 人民币</div>
        <InputNumber aria-labelledby="inputnumber-currency-locale-cny" currency="CNY" :defaultValue="defaultValue" localeCode="zh-CN" />
        <br />
        <br />
        <div id="inputnumber-currency-locale-eur">🇪🇺 欧元</div>
        <InputNumber aria-labelledby="inputnumber-currency-locale-eur" currency="EUR" :defaultValue="defaultValue" localeCode="de-DE" />
        <br />
        <br />
        <div id="inputnumber-currency-locale-jpy">🇯🇵 日元</div>
        <InputNumber aria-labelledby="inputnumber-currency-locale-jpy" currency="JPY" :defaultValue="defaultValue" localeCode="ja-JP" />
        <br />
        <br />
        <div id="inputnumber-currency-locale-vnd">🇻🇳 越南盾</div>
        <InputNumber aria-labelledby="inputnumber-currency-locale-vnd" currency="VND" :defaultValue="defaultValue" localeCode="vi-VN" />
        <br />
        <br />
    </div>
</template>

支持 symbol、code、name 三种展示方式，通过 currencyDisplay 属性控制，默认以货币符号展示。showCurrencySymbol 设置为 false 隐藏货币符号/代码/名称的展示

🇨🇳 CNY ➕ code

🇨🇳 CNY ➕ symbol

🇨🇳 CNY ➕ name

代码

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';

    const defaultValue = 123456.78;
</script>

<template>
    <div>
        <div id="inputnumber-currency-display-code">🇨🇳 CNY ➕ code</div>
        <InputNumber aria-labelledby="inputnumber-currency-display-code" currency="CNY" currencyDisplay="code" :defaultValue="defaultValue" />
        <br />
        <br />
        <div id="inputnumber-currency-display-symbol">🇨🇳 CNY ➕ symbol</div>
        <InputNumber aria-labelledby="inputnumber-currency-display-symbol" currency="CNY" currencyDisplay="symbol" :defaultValue="defaultValue" />
        <br />
        <br />
        <div id="inputnumber-currency-display-name">🇨🇳 CNY ➕ name</div>
        <InputNumber aria-labelledby="inputnumber-currency-display-name" currency="CNY" currencyDisplay="name" :defaultValue="defaultValue" />
        <br />
        <br />
    </div>
</template>

隐藏货币符号、代码或名称的展示，通过前后缀展示货币符号

🇨🇳 CNY ➕ code

CNY

🇨🇳 CNY ➕ symbol

￥

🇨🇳 CNY ➕ name

人民币

代码

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';

    const defaultValue = 123456.78;
</script>

<template>
    <div>
        <div id="inputnumber-currency-affix-code">🇨🇳 CNY ➕ code</div>
        <InputNumber aria-labelledby="inputnumber-currency-affix-code" currency="CNY" :defaultValue="defaultValue" :showCurrencySymbol="false" style="width: 200px">
            <template #prefix>CNY</template>
        </InputNumber>
        <br />
        <br />
        <div id="inputnumber-currency-affix-symbol">🇨🇳 CNY ➕ symbol</div>
        <InputNumber aria-labelledby="inputnumber-currency-affix-symbol" currency="CNY" :defaultValue="defaultValue" :showCurrencySymbol="false" style="width: 200px">
            <template #prefix>￥</template>
        </InputNumber>
        <br />
        <br />
        <div id="inputnumber-currency-affix-name">🇨🇳 CNY ➕ name</div>
        <InputNumber aria-labelledby="inputnumber-currency-affix-name" currency="CNY" :defaultValue="defaultValue" :showCurrencySymbol="false" style="width: 200px">
            <template #suffix>人民币</template>
        </InputNumber>
        <br />
        <br />
    </div>
</template>

科学计数法显示

当数字较长时，可以通过 scientificNotation 属性启用科学计数法显示。失去焦点时显示科学计数法，获得焦点时显示完整数字。

启用科学计数法（默认阈值 15 位）

自定义阈值（10 位）

超大数字

小数场景

代码

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div style="width: 280px">
        <span id="inputnumber-scientific-default">启用科学计数法（默认阈值 15 位）</span>
        <InputNumber aria-labelledby="inputnumber-scientific-default" :defaultValue="123456789012345" scientificNotation />
        <br />
        <br />

        <span id="inputnumber-scientific-threshold">自定义阈值（10 位）</span>
        <InputNumber aria-labelledby="inputnumber-scientific-threshold" :defaultValue="1234567890" :scientificNotation="{ threshold: 10 }" />
        <br />
        <br />

        <span id="inputnumber-scientific-large">超大数字</span>
        <InputNumber aria-labelledby="inputnumber-scientific-large" :defaultValue="1e16" scientificNotation />
        <br />
        <br />

        <span id="inputnumber-scientific-decimal">小数场景</span>
        <InputNumber aria-labelledby="inputnumber-scientific-decimal" :defaultValue="0.000000123456789" :precision="10" scientificNotation />
        <br />
        <br />
    </div>
</template>

API 参考

Props

属性	说明	类型	默认值
modelValue	当前值，供 v-model 使用。输入的中间态或非法文本为字符串，清空时为 ''；显式传 undefined 时按非受控处理。	`string \| number`	`undefined`
defaultValue	非受控时的初始值。	`string \| number`	`semiGlobalDefault("InputNumber", "defaultValue")`
currency	货币种类，可选值有 CNY、EUR、USD 等。设为 true 时使用 defaultCurrency，未设置时为语言包对应的货币；裸写 currency 等同于 true。	`string \| boolean`	`semiGlobalDefault("InputNumber", "currency")`
currencyDisplay	货币展示方式，可选 symbol、code、name。	`"symbol" \| "name" \| "code"`	`semiGlobalDefault("InputNumber", "currencyDisplay")`
defaultCurrency	currency 为 true 时使用的货币种类，优先级为自身属性、全局默认值、语言包。	`string`	`semiGlobalDefault("InputNumber", "defaultCurrency")`
localeCode	货币模式下用于格式化的语言地区代码，如 zh-CN、en-US、de-DE。优先级为自身属性、全局默认值、LocaleProvider 或 ConfigProvider 的语言包。	`string`	`semiGlobalDefault("InputNumber", "localeCode")`
minimumFractionDigits	显示的最小小数位数，传给 Intl.NumberFormat。	`number`	`semiGlobalDefault("InputNumber", "minimumFractionDigits")`
maximumFractionDigits	显示的最大小数位数，传给 Intl.NumberFormat。	`number`	`semiGlobalDefault("InputNumber", "maximumFractionDigits")`
precision	数值精度，即保留的小数位数。	`number`	`semiGlobalDefault("InputNumber", "precision")`
scientificNotation	启用科学计数法显示：失焦时显示科学计数法，聚焦时显示完整数字。可传入 `{ threshold }` 配置阈值，默认 15 位有效数字。不支持货币模式。	`boolean \| ScientificNotationConfig`	`semiGlobalDefault("InputNumber", "scientificNotation")`
showCurrencySymbol	是否显示货币符号、代码或名称，仅货币模式下生效。	`boolean`	`semiDefault("InputNumber", "showCurrencySymbol", true)`
formatter	指定输入框展示值的格式，一般与 parser 同时设置。优先级为自身属性、全局默认值。	`Type`	`undefined`
parser	指定从 formatter 转换回数字串的方式，与 formatter 搭配使用。优先级为自身属性、全局默认值。	`Type`	`undefined`
min	限定最小值。	`number`	`semiDefault("InputNumber", "min", -Infinity)`
max	限定最大值。	`number`	`semiDefault("InputNumber", "max", Infinity)`
step	每次改变的步长，可以为小数。	`number`	`semiDefault("InputNumber", "step", numbers.DEFAULT_STEP)`
shiftStep	按住 Shift 时每次改变的步长，可以为小数。	`number`	`semiDefault("InputNumber", "shiftStep", numbers.DEFAULT_SHIFT_STEP)`
pressInterval	长按步进按钮时，连续触发的间隔，单位毫秒。	`number`	`Type`
pressTimeout	长按步进按钮时，开始连续触发前的延迟，单位毫秒。	`number`	`Type`
keepFocus	点击步进按钮时保持输入框聚焦。	`boolean`	`semiDefault("InputNumber", "keepFocus", false)`
innerButtons	将步进按钮放在输入框内部，悬停或聚焦时显示，并临时替换 suffix 插槽。	`boolean`	`semiDefault("InputNumber", "innerButtons", false)`
hideButtons	隐藏步进按钮；与 innerButtons 同时为 true 时也不显示内置按钮。	`boolean`	`semiDefault("InputNumber", "hideButtons", false)`
size	输入框大小，可选 default、small、large。	`Size`	`semiDefault("InputNumber", "size", "default")`
disabled	是否禁用。	`boolean`	`semiGlobalDefault("InputNumber", "disabled")`
readonly	是否只读。	`boolean`	`semiGlobalDefault("InputNumber", "readonly")`
borderless	无边框模式。	`boolean`	`semiGlobalDefault("InputNumber", "borderless")`
showClear	是否显示清除按钮。	`boolean`	`semiGlobalDefault("InputNumber", "showClear")`
hideSuffix	清除按钮显示时隐藏后缀，默认两者并列。	`boolean`	`semiGlobalDefault("InputNumber", "hideSuffix")`
composition	是否启用输入法组合模式，开启后组合输入期间不触发 change，组合结束后触发一次。	`boolean`	`semiGlobalDefault("InputNumber", "composition")`
preventScroll	聚焦时是否阻止浏览器滚动文档以显示输入框，作用于组件内的 focus 调用。	`boolean`	`semiGlobalDefault("InputNumber", "preventScroll")`
autofocus	挂载后自动聚焦输入框。	`boolean`	`semiGlobalDefault("InputNumber", "autofocus")`
maxlength	输入框文本的最大长度。	`number`	`semiGlobalDefault("InputNumber", "maxlength")`
minlength	输入框文本的最小长度。	`number`	`semiGlobalDefault("InputNumber", "minlength")`
placeholder	占位文本。	`string \| number`	`semiGlobalDefault("InputNumber", "placeholder")`
validateStatus	校验状态，可选 default、error、warning、success。	`"default" \| "error" \| "warning" \| "success"`	`semiGlobalDefault("InputNumber", "validateStatus")`
inputStyle	原生 input 的样式。	`StyleValue`	`semiGlobalDefault("InputNumber", "inputStyle")`
insetLabelId	内嵌标签的 id。	`string`	`undefined`

Events

事件	说明	回调参数
update:modelValue	值变化时触发，供 v-model 回写，与 change 同时发出。	`[value: string \| number]`
change	值变化时触发。第二个参数是触发变化的事件：输入、步进按钮 pointerdown、方向键或 Home/End 键、失焦。挂载和 modelValue 变化不触发，越界值按原样显示，用户操作时才校正并通知。	`[value: string \| number, event: InputNumberChangeEvent]`
numberChange	数字变化时触发，事件参数同 change。	`[value: number, event: InputNumberChangeEvent]`
upClick	按下增大按钮步进时触发，长按连续步进时每步触发一次；参数为步进后的值与 pointerdown 事件。	`[value: string, event: PointerEvent]`
downClick	按下减小按钮步进时触发，长按连续步进时每步触发一次；参数为步进后的值与 pointerdown 事件。	`[value: string, event: PointerEvent]`
focus	焦点进入输入框时触发；焦点在输入框与清除按钮之间移动不触发。事件为 Input 外层元素的 focusin。	`[event: FocusEvent]`
blur	焦点离开输入框与清除按钮时触发。事件为 Input 外层元素的 focusout。	`[event: FocusEvent]`
keydown	在输入框中按下按键时触发。	`[event: KeyboardEvent]`

Slots

插槽	说明	作用域参数
prefix	前缀内容。	`any`
suffix	后缀内容；innerButtons 的按钮显示期间被替换。	`any`
insetLabel	内嵌标签。	`any`
clearIcon	自定义清除按钮的图标，showClear 为 true 时有效。	`any`
addonBefore	前置标签。	`any`
addonAfter	后置标签。	`any`

Exposes

名称	说明	类型
focus	聚焦输入框；未传 options.preventScroll 时使用 preventScroll 属性的值。	`Type`
blur	移出焦点。	`Type`
select	选中输入框中的全部文本。	`Type`
setSelectionRange	设置选区，参数同原生 setSelectionRange。	`Type`
input	原生 input 元素，卸载后为 null。	`HTMLInputElement \| null`
nativeElement	组件根元素，卸载后为 null。	`HTMLElement \| null`

v-model 绑定 modelValue（number | string），不支持 .number、.trim 修饰符；非受控初值用 defaultValue。change 与 update:modelValue 同时发出，载荷一致。回调改为同名事件：@change、@numberChange、@upClick、@downClick、@focus、@blur、@keydown。focus、blur 来自 Input 外层的 focusin、focusout；步进按钮不可聚焦，本身不触发这两个事件。

prefix、suffix、insetLabel、clearIcon、addonBefore、addonAfter 是同名插槽，例如 prefix="$" 写成 <template #prefix>$</template>。

没有 prefixCls、className；class、style 落在外层 .semi-input-number，其余属性（id、name、tabindex、title、aria-*、data-*、role）落在原生 input。上表未声明的 Input 事件（enterPress、clear、input、keyup、compositionstart 等）经 attrs 交给内部 Input，直接写 @enterPress 等即可。

Methods

ref 拿到 InputNumberHandle，成员见上方 API 参考的 Exposes。

Accessibility

参考标准：https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/

ARIA

数字输入框具有 spinbutton role
spinbutton 使用 aria-valuenow 表示当前值，aria-valuemax 表示可以接受的最大值，aria-valuemin 表示可以接受的最小值
当 InputNumber 在 Form 中使用时，输入框的 aria-labelledby 指向 Field label

键盘和焦点

InputNumber 可被获取焦点，键盘用户可以使用 Tab 及 Shift + Tab 切换焦点（增加/减少按钮不可以被键盘聚焦）
键盘用户可以按上键 ⬆️ 或下键 ⬇️ ，输入值将增加或减少 step（默认值为 1）
按住 Shift + 上键 ⬆️ 或下键 ⬇️ ，输入值将增加或减少 shiftStep（默认值为 10）
设置了 min 时按 Home 跳到最小值，设置了 max 时按 End 跳到最大值；未设置对应边界时，两个键照常移动光标
值已在边界、按键后数值不变时，不会触发 onChange（Vue 为 change 事件）

设计变量

下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。

Sass 变量	值	用法
$transition_duration-inputNumber-bg	var(--semi-transition_duration-none)	数字输入框-背景色-动画持续时间
$transition_function-inputNumber-bg	var(--semi-transition_function-easeIn)	数字输入框-背景色-过渡曲线
$transition_delay-inputNumber-bg	var(--semi-transition_delay-none)	数字输入框-背景色-延迟时间
$transition_duration-inputNumber-border	var(--semi-transition_duration-none)	数字输入框-边框-动画持续时间
$transition_function-inputNumber-border	var(--semi-transition_function-easeIn)	数字输入框-边框-过渡曲线
$transition_delay-inputNumber-border	var(--semi-transition_delay-none)	数字输入框-边框-延迟时间
$transform_scale-inputNumber	var(--semi-transform_scale-none)	数字输入框-变大
$height-inputNumber_button_default	$height-control-default	数字输入框高度 - 默认
$height-inputNumber_button_large	$height-control-large	数字输入框高度 - 大
$height-inputNumber_button_small	$height-control-small	数字输入框高度 - 小
$height-inputNumber_button_inner_default	$height-control-default - 2px	隐藏步进器的数字输入框高度 - 默认
$height-inputNumber_button_inner_large	$height-control-large - 2px	隐藏步进器的数字输入框高度 - 大
$height-inputNumber_button_inner_small	$height-control-small - 2px	隐藏步进器的数字输入框高度 - 小
$width-inputNumber_button	14px	步进器按钮宽度
$radius-inputNumber	var(--semi-border-radius-small)	步进器按钮圆角 - 外部
$radius-inputNumber_inner	var(--semi-border-radius-small)	步进器按钮圆角 - 内部
$spacing-inputNumber_button-marginLeft	4px	步进器按钮左侧外边距
$color-inputNumber_button-text-default	var(--semi-color-text-2)	步进器按钮图标颜色
$color-inputNumber_button-text-disabled	var(--semi-color-disabled-text)	步进器按钮图标颜色 - 禁用
$color-inputNumber_button-bg-default	var(--semi-color-bg-2)	步进器按钮背景颜色
$color-inputNumber_button-bg-disabled	var(--semi-color-disabled-fill)	步进器按钮背景颜色 - 禁用
$color-inputNumber_button-bg-hover	var(--semi-color-fill-0)	步进器按钮图标颜色 - 悬浮
$color-inputNumber_button-bg-active	var(--semi-color-fill-1)	步进器按钮图标颜色 - 按下
$color-inputNumber_button-border-default	var(--semi-color-border)	步进器按钮描边颜色
$color-inputNumber_button-border-hover	var(--semi-color-fill-2)	步进器按钮描边颜色 - 悬浮
$width-inputNumber_button-border	1px	步进器按钮描边宽度
$spacing-inputNumber_button_inner-marginLeft	$spacing-tight	隐藏步进器按钮左侧外边距
$spacing-inputNumber_clearbtn_suffix-marginLeft	-$spacing-extra-tight	清空按钮左侧外边距