Fes Design
本页目录

inputNumber 数字输入框 ​

通过鼠标或者键盘输入内容，仅能输入数字。

组件注册 ​

js
import { FInputNumber } from '@fesjs/fes-design';

app.use(FInputNumber);

代码演示 ​

标准使用 ​

play
<template>
    <FSpace>
        <FInputNumber v-model="val" :max="100"></FInputNumber>
        {{ val }}
    </FSpace>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const val = ref(10);
        return {
            val,
        };
    },
};
</script>

禁用状态 ​

play
<template>
    <FSpace>
        <FInputNumber :modelValue="1" disabled></FInputNumber>
    </FSpace>
</template>

设置最大值最小值 ​

设定最大值为 10，最小值为 1

play
<template>
    <FSpace>
        <FInputNumber :min="min" :max="max"></FInputNumber>
    </FSpace>
</template>

<script>
export default {
    setup() {
        const min = 1;
        const max = 10;
        return {
            min,
            max,
        };
    },
};
</script>

设置精度 ​

设置精度为 2

play
<template>
    <FSpace>
        <FInputNumber :precision="precision"></FInputNumber>
    </FSpace>
</template>

<script>
export default {
    setup() {
        const precision = 2;
        return {
            precision,
        };
    },
};
</script>

设置步长 ​

设置步长为 5，最大值为 12,精度为 2

play
<template>
    <FSpace>
        <FInputNumber
            :step="step"
            :max="12"
            :precision="precision"
        ></FInputNumber>
    </FSpace>
</template>

<script lang="ts">
export default {
    setup() {
        const precision = 2;
        const step = 5;
        return {
            precision,
            step,
        };
    },
};
</script>

设置前置后置 ​

play
<template>
    <FSpace>
        <FInputNumber>
            <template #prefix>¥</template>
        </FInputNumber>
        <FInputNumber>
            <template #suffix>%</template>
        </FInputNumber>
    </FSpace>
</template>

<script lang="ts">
export default {
    setup() {
        const precision = 2;
        const step = 5;
        return {
            precision,
            step,
        };
    },
};
</script>

Props ​

属性说明类型默认值
modelValuev-model 双向绑定number-
min计数器最小值number-infinity
max计数器最大值numberinfinity
step计数器步长number1
disabled是否禁用booleanfalse
placeholder输入框默认提示string-
precision数值精度number-

Slots ​

属性说明
prefix前缀
suffix后缀

Events ​

事件名称说明回调参数
change绑定值被改变时触发currentValue, oldValue
blur在组件 Input 失去焦点时触发(event: Event)
focus在组件 Input 获得焦点时触发(event: Event)