InputNumber 组件，用于纯数值场景。

基本用法

支持max和min控制最大值和最小值限制。

如未设置合理的max和min属性，请注意数字安全范围问题，具体见MAX_SAFE_INTEGER与MIN_SAFE_INTEGER。

展开查看代码

<template>
    <j-space>
        <j-input-number v-model:value="value" :min="-5" :max="5" placeholder="请输入数值" />
    </j-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()
</script>

前缀，前置和后置标签

给输入框上添加前缀/前置/后置标签，常用于一些固定搭配。

￥

展开查看代码

<template>
    <j-space>
        <j-input-number v-model:value="value">
            <template #prefix>￥</template>
            <template #addonBefore>
                <ShoppingCart />
            </template>
            <template #addonAfter>
                <MoreHorizontal />
            </template>
        </j-input-number>
    </j-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ShoppingCart, MoreHorizontal } from '@jview/icons'

const value = ref()
</script>

尺寸

通过size属性控制尺寸大小。

展开查看代码

<template>
    <j-space>
        <j-input-number v-model:value="value" size="small" />
        <j-input-number v-model:value="value" />
        <j-input-number v-model:value="value" size="large" />
    </j-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref(6)
</script>

控制按钮

通过controls属性决定是否显示控制增减的按钮。默认显示。

展开查看代码

<template>
    <j-space>
        <j-input-number v-model:value="value" :controls="false" />
    </j-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()
</script>

键盘快捷键

通过keyboard属性决定是否支持通过键盘上键和下键控制数字的增减。默认支持。

展开查看代码

<template>
    <j-space>
        <j-input-number v-model:value="value" placeholder="支持键盘控制" />
        <j-input-number v-model:value="value" :keyboard="false" placeholder="不支持键盘控制" />
    </j-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()
</script>

步进值和精度

通过step属性控制步进值，默认为1。

通过precision属性小数点后的精度。

展开查看代码

<template>
    <j-space>
        <j-input-number v-model:value="value" :step="0.001" :max="5" placeholder="step=0.001" />

        <j-input-number v-model:value="value" :step="0.001" :max="5" :precision="4" placeholder="precision=4" />
    </j-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()
</script>

自定义控制图标

通过upIcon插槽或属性自定义渲染增加图标。

通过downIcon插槽或属性自定义渲染减少图标。

PS: jsx或tsx中支持插槽或属性，模板中支持插槽。

+

-

展开查看代码

<template>
    <j-space>
        <j-input-number v-model:value="value">
            <template #upIcon>+</template>
            <template #downIcon>-</template>
        </j-input-number>
    </j-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()
</script>

属性

参数	说明	类型	默认值	必填
defaultValue	默认值，初始化 value 值为 undefined 时起作用	number	无	否
value	输入框的值	number	无	否
disabled	是否禁用	boolean	无	否
controls	是否显示增减按钮	boolean	true	否
keyboard	是否支持键盘控制	boolean	true	否
max	最大值	number	Infinity	否
clearable	支持点击清除图标删除输入内容	boolean	无	否
min	最小值	number	-Infinity	否
clearIcon	定制清除图标，支持属性和插槽	VNode	无	否
step	步进值，默认为1	number	1	否
precision	小数点后精度	number	无	否
addonBefore	前置标签，支持属性和插槽	string | VNode	无	否
autofocus	自动获得焦点	boolean	无	否
addonAfter	后置标签，支持属性和插槽	string | VNode	无	否
upIcon	定制增加图标，支持属性和插槽	VNode	无	否
downIcon	定制减少图标，支持属性和插槽	VNode	无	否
size	输入框的尺寸	"small" | "default" | "large"	'default'	否