JView UI

Appearance

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

基本用法 ​

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

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

展开查看代码
vue
<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" :min="-5" :max="5" placeholder="请输入数值" />
    </j-space>
</template>

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

const value = ref()
</script>

前缀，前置和后置标签 ​

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

￥
展开查看代码
vue
<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>
<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属性控制尺寸大小。

展开查看代码
vue
<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>
<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属性决定是否显示控制增减的按钮。默认显示。

展开查看代码
vue
<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>
<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属性决定是否支持通过键盘上键和下键控制数字的增减。默认支持。

展开查看代码
vue
<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>
<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属性小数点后的精度。

展开查看代码
vue
<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>
<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中支持插槽或属性，模板中支持插槽。

+
-
展开查看代码
vue
<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>
<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是否显示增减按钮booleantrue否
keyboard是否支持键盘控制booleantrue否
max最大值numberInfinity否
clearable支持点击清除图标删除输入内容boolean无否
min最小值number-Infinity否
clearIcon定制清除图标，支持属性和插槽VNode无否
step步进值，默认为1number1否
precision小数点后精度number无否
addonBefore前置标签，支持属性和插槽string | VNode无否
autofocus自动获得焦点boolean无否
addonAfter后置标签，支持属性和插槽string | VNode无否
upIcon定制增加图标，支持属性和插槽VNode无否
downIcon定制减少图标，支持属性和插槽VNode无否
size输入框的尺寸"default" | "small" | "large"'default'否

Copyright © 2022-2024 All Rights Reserved by Tusi.