组件
    切换框架
    ReactVueSolidSvelte
    切换语言
    简体中文English
    GitHub
    输入类

    数字输入框

    通过鼠标或键盘，输入范围内的数值，与 Input 不同的是它带有针对数字场景的步进器操作区，配合 Parser 使用可以展示更复杂的内容格式

    使用场景

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

    代码演示

    如何引入

    <script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';
</script>

    基本输入框

    没有 defaultValue：只传 value 作为初始值，需要读写时用 bind:value，需要拒绝或改写时用函数绑定 bind:value={() => value, (next) => { ... }}。

    简单数字输入框


    设置了步长 step=2


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


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


    代码
    <script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';
</script>

<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" max={10} min={1} value={1} />
    <br />
    <br />
</div>
    设置了默认值 value=1


    禁用 disabled=true


    设置了小数位数 precision=2


    设置了 innerButtons=true
    小时

    代码
    <script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';
</script>

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

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

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

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

    隐藏步进器

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

    代码
    <script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';
</script>

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

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

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

    代码
    <script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';
</script>

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

    尺寸

    默认尺寸 size=default


    大尺寸 size=large


    小尺寸 size=small

    代码
    <script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';
</script>

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

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

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

    人民币


    自定义串

    代码
    <script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';

    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>

<div style="width: 180px">
    <span id="inputnumber-formatter-rmb">人民币</span>
    <InputNumber aria-labelledby="inputnumber-formatter-rmb" formatter={formatRmb} min={0} onChange={log} parser={parseRmb} value={1000} />
    <br />
    <br />

    <span id="inputnumber-formatter-custom">自定义串</span>
    <InputNumber aria-labelledby="inputnumber-formatter-custom" formatter={formatCustom} onChange={log} parser={parseCustom} value={1111} />
    <br />
</div>

    纯数字输入框

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

    代码
    <script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';

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

<InputNumber aria-label="Integer" formatter={formatInteger} max={Number.MAX_SAFE_INTEGER} min={0} onNumberChange={log} />

    货币展示

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

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

    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 optionList = [
        { value: 'zh_CN', label: '简体中文' },
        { value: 'en_US', label: '英语（美）' },
        { value: 'en_GB', label: '英语（英）' },
        { value: 'ja_JP', label: '日语' },
        { value: 'ko_KR', label: '韩语' },
        { value: 'ar', label: '阿拉伯语' },
        { value: 'vi_VN', label: '越南语' },
        { value: 'ru_RU', label: '俄罗斯语' },
        { value: 'id_ID', label: '印尼语' },
        { value: 'ms_MY', label: '马来语' },
        { value: 'th_TH', label: '泰语' },
        { value: 'tr_TR', label: '土耳其语' },
        { value: 'pt_BR', label: '葡萄牙语（巴西）' },
        { value: 'zh_TW', label: '繁体中文' },
        { value: 'es', label: '西班牙语' },
        { value: 'de', label: '德语' },
        { value: 'it', label: '意大利语' },
        { value: 'fr', label: '法语' },
        { value: 'ro', label: '罗马尼亚语' },
        { value: 'sv_SE', label: '瑞典语' },
        { value: 'pl_PL', label: '波兰语' },
        { value: 'nl_NL', label: '荷兰语' },
    ];

    let localeCode = $state<keyof typeof languages>('zh_CN');
    const locale = $derived(languages[localeCode]);

    const onLanguageChange = (code: unknown) => {
        if (typeof code === 'string' && code in languages) {
            localeCode = code as keyof typeof languages;
        }
    };
</script>

<div style="padding-bottom: 20px">
    <Select aria-label="切换语言" onChange={onLanguageChange} {optionList} style="width: 250px" value="zh_CN">
        {#snippet insetLabel()}切换语言{/snippet}
    </Select>
</div>
<LocaleProvider {locale}>
    {#key localeCode}
        <InputNumber aria-label="金额" currency value={123456.78} />
    {/key}
</LocaleProvider>

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

    🇨🇳 人民币


    🇪🇺 欧元


    🇯🇵 日元


    🇻🇳 越南盾


    代码
    <script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';

    const value = 123456.78;
</script>

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

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

    🇨🇳 CNY ➕ code


    🇨🇳 CNY ➕ symbol


    🇨🇳 CNY ➕ name


    代码
    <script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';

    const value = 123456.78;
</script>

<div>
    <div id="inputnumber-currency-display-code">🇨🇳 CNY ➕ code</div>
    <InputNumber aria-labelledby="inputnumber-currency-display-code" currency="CNY" currencyDisplay="code" {value} />
    <br />
    <br />
    <div id="inputnumber-currency-display-symbol">🇨🇳 CNY ➕ symbol</div>
    <InputNumber aria-labelledby="inputnumber-currency-display-symbol" currency="CNY" currencyDisplay="symbol" {value} />
    <br />
    <br />
    <div id="inputnumber-currency-display-name">🇨🇳 CNY ➕ name</div>
    <InputNumber aria-labelledby="inputnumber-currency-display-name" currency="CNY" currencyDisplay="name" {value} />
    <br />
    <br />
</div>

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

    🇨🇳 CNY ➕ code
    CNY


    🇨🇳 CNY ➕ symbol
    ￥


    🇨🇳 CNY ➕ name
    人民币


    代码
    <script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';

    const value = 123456.78;
</script>

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

    科学计数法显示

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

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


    自定义阈值（10 位）


    超大数字


    小数场景


    代码
    <script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';
</script>

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

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

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

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

    API 参考

    Props

    属性说明类型默认值
    addonAfter后置标签的 snippet。Snippet-
    addonBefore前置标签的 snippet。Snippet-
    autofocus挂载后自动聚焦输入框。boolean-
    borderless无边框模式。boolean-
    clearIcon自定义清除按钮图标的 snippet，showClear 为 true 时有效。Snippet-
    composition是否启用输入法组合模式，开启后组合输入期间不触发 onChange，组合结束后触发一次。boolean-
    currency货币种类，可选值有 CNY、EUR、USD 等。设为 true 时使用 defaultCurrency，未设置时为语言包对应的货币；裸写 currency 等同于 true。boolean | string-
    currencyDisplay货币展示方式，可选 symbol、code、name。'code' | 'symbol' | 'name'-
    defaultCurrencycurrency 为 true 时使用的货币种类，优先级为自身属性、全局默认值、语言包。string-
    disabled是否禁用。boolean-
    formatter指定输入框展示值的格式，一般与 parser 同时设置。优先级为自身属性、全局默认值。Type(value: number | string) => string-
    hideButtons隐藏步进按钮；与 innerButtons 同时为 true 时也不显示内置按钮。booleanfalse
    hideSuffix清除按钮显示时隐藏后缀，默认两者并列。boolean-
    innerButtons将步进按钮放在输入框内部，悬停或聚焦时显示，并临时替换 suffix。booleanfalse
    inputStyle原生 input 的样式，只接受字符串。string-
    insetLabel内嵌标签的 snippet。Snippet-
    insetLabelId内嵌标签的 id。string-
    keepFocus点击步进按钮时保持输入框聚焦。booleanfalse
    localeCode货币模式下用于格式化的语言地区代码，如 zh-CN、en-US、de-DE。优先级为自身属性、全局默认值、LocaleProvider 或 ConfigProvider 的语言包。string-
    max限定最大值。numberInfinity
    maximumFractionDigits显示的最大小数位数，传给 Intl.NumberFormat。number-
    maxlength输入框文本的最大长度。number-
    min限定最小值。number-Infinity
    minimumFractionDigits显示的最小小数位数，传给 Intl.NumberFormat。number-
    minlength输入框文本的最小长度。number-
    onBlur焦点离开输入框与清除按钮时的回调，事件为 Input 外层元素的 focusout。Type(event: FocusEvent) => void-
    onChange值变化时的回调。第二个参数是触发变化的事件：输入、步进按钮 pointerdown、方向键或 Home/End 键、失焦。挂载和父级传入新值不触发，越界值按原样显示，用户操作时才校正并通知。Type(value: number | string, event: InputNumberChangeEvent) => void-
    onClear点击清除按钮时的回调。Type(event: MouseEvent) => void-
    onCompositionEnd输入法组合结束时的回调。Type(event: CompositionEvent) => void-
    onCompositionStart输入法组合开始时的回调。Type(event: CompositionEvent) => void-
    onCompositionUpdate输入法组合过程中的回调。Type(event: CompositionEvent) => void-
    onDownClick按下减小按钮步进时的回调，长按连续步进时每步触发一次；参数为步进后的值与 pointerdown 事件。Type(value: string, event: PointerEvent) => void-
    onEnterPress在输入框中按下 Enter 时的回调。Type(event: KeyboardEvent) => void-
    onFocus焦点进入输入框时的回调；焦点在输入框与清除按钮之间移动不触发。事件为 Input 外层元素的 focusin。Type(event: FocusEvent) => void-
    onInput原生 input 事件的回调。Type(event: Event) => void-
    onKeyDown在输入框中按下按键时的回调。Type(event: KeyboardEvent) => void-
    onKeyUp在输入框中松开按键时的回调。Type(event: KeyboardEvent) => void-
    onNumberChange数字变化时的回调，事件参数同 onChange。Type(value: number, event: InputNumberChangeEvent) => void-
    onUpClick按下增大按钮步进时的回调，长按连续步进时每步触发一次；参数为步进后的值与 pointerdown 事件。Type(value: string, event: PointerEvent) => void-
    parser指定从 formatter 转换回数字串的方式，与 formatter 搭配使用。优先级为自身属性、全局默认值。Type(value: string) => string-
    placeholder占位文本。string | number-
    precision数值精度，即保留的小数位数。number-
    prefix前缀内容的 snippet。Snippet-
    pressInterval长按步进按钮时，连续触发的间隔，单位毫秒。number250
    pressTimeout长按步进按钮时，开始连续触发前的延迟，单位毫秒。number250
    preventScroll聚焦时是否阻止浏览器滚动文档以显示输入框，作用于组件内的 focus 调用。boolean-
    readonly是否只读。boolean-
    readOnly原生 readonly：只禁止键入，保留清除按钮；readonly 同时隐藏清除按钮。boolean-
    scientificNotation启用科学计数法显示：失焦时显示科学计数法，聚焦时显示完整数字。可传入 { threshold } 配置阈值，默认 15 位有效数字。不支持货币模式。boolean | ScientificNotationConfig-
    shiftStep按住 Shift 时每次改变的步长，可以为小数。number10
    showClear是否显示清除按钮。boolean-
    showCurrencySymbol是否显示货币符号、代码或名称，仅货币模式下生效。booleantrue
    size输入框大小，可选 default、small、large。InputSize-
    step每次改变的步长，可以为小数。number1
    suffix后缀内容的 snippet；innerButtons 的按钮显示期间被替换。Snippet-
    validateStatus校验状态，可选 default、error、warning、success。ValidateStatus-
    value当前值，可用 bind:value 双向绑定。输入的中间态或非法文本为字符串，清空时为 ''。bind:value={get, set} 时完全受控；只传 value 时作为初值。number | string-

    Methods

    方法说明类型
    blur移出焦点。Type() => void
    focus聚焦输入框；未传 options.preventScroll 时使用 preventScroll 属性的值。Type(options?: FocusOptions) => void
    getInput返回原生 input 元素，卸载后为 null。Type() => any
    getNativeElement返回组件根元素，卸载后为 null。Type() => HTMLDivElement | undefined
    select选中输入框中的全部文本。Type() => void
    setSelectionRange设置选区，参数同原生 setSelectionRange。Type(start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none') => void

    class、style（字符串）落在外层 .semi-input-number 上；其余未声明属性（id、name、tabindex、title、aria-*、data-*、role）落在原生 input。prefix、suffix、insetLabel、clearIcon、addonBefore、addonAfter 是 snippet。放在 InputGroup 里时跟随分组的 size、disabled。

    Methods

    通过 bind:this 取得组件实例后调用 focus(options)、blur()、select()、setSelectionRange()、getInput()、getNativeElement()，说明见上方 Methods；focus() 未传参数时遵循 preventScroll 属性。

    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-bgvar(--semi-transition_duration-none)数字输入框-背景色-动画持续时间
    $transition_function-inputNumber-bgvar(--semi-transition_function-easeIn)数字输入框-背景色-过渡曲线
    $transition_delay-inputNumber-bgvar(--semi-transition_delay-none)数字输入框-背景色-延迟时间
    $transition_duration-inputNumber-bordervar(--semi-transition_duration-none)数字输入框-边框-动画持续时间
    $transition_function-inputNumber-bordervar(--semi-transition_function-easeIn)数字输入框-边框-过渡曲线
    $transition_delay-inputNumber-bordervar(--semi-transition_delay-none)数字输入框-边框-延迟时间
    $transform_scale-inputNumbervar(--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_button14px步进器按钮宽度
    $radius-inputNumbervar(--semi-border-radius-small)步进器按钮圆角 - 外部
    $radius-inputNumber_innervar(--semi-border-radius-small)步进器按钮圆角 - 内部
    $spacing-inputNumber_button-marginLeft4px步进器按钮左侧外边距
    $color-inputNumber_button-text-defaultvar(--semi-color-text-2)步进器按钮图标颜色
    $color-inputNumber_button-text-disabledvar(--semi-color-disabled-text)步进器按钮图标颜色 - 禁用
    $color-inputNumber_button-bg-defaultvar(--semi-color-bg-2)步进器按钮背景颜色
    $color-inputNumber_button-bg-disabledvar(--semi-color-disabled-fill)步进器按钮背景颜色 - 禁用
    $color-inputNumber_button-bg-hovervar(--semi-color-fill-0)步进器按钮图标颜色 - 悬浮
    $color-inputNumber_button-bg-activevar(--semi-color-fill-1)步进器按钮图标颜色 - 按下
    $color-inputNumber_button-border-defaultvar(--semi-color-border)步进器按钮描边颜色
    $color-inputNumber_button-border-hovervar(--semi-color-fill-2)步进器按钮描边颜色 - 悬浮
    $width-inputNumber_button-border1px步进器按钮描边宽度
    $spacing-inputNumber_button_inner-marginLeft$spacing-tight隐藏步进器按钮左侧外边距
    $spacing-inputNumber_clearbtn_suffix-marginLeft-$spacing-extra-tight清空按钮左侧外边距