Fes Design

inputNumber 数字输入框 ​

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

组件注册 ​

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

app.use(FInputNumber);

代码演示 ​

标准使用 ​

play
<template>
    <FForm>
        <FFormItem label="显示步进箭头">
            <FSwitch v-model="showStepAction" />
        </FFormItem>
    </FForm>
    <FInputNumber
        v-model="val"
        :max="100"
        :showStepAction="showStepAction"
        :autofocus="true"
    />
</template>

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

const val = ref(10);
const showStepAction = ref(true);
</script>

禁用状态 ​

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

设置最大值最小值 ​

设定最大值为 100，最小值为 10。

play
<template>
    <FSpace align="center">
        <FInputNumber v-model="num" :min="min" :max="max" />
        当前值: {{ num }}
    </FSpace>
</template>

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

const num = ref();

const min = 10;
const max = 100;
</script>

设置精度 ​

设置精度为 2。

play
<template>
    <FSpace align="center">
        <FInputNumber v-model="num" :precision="precision" />
        当前值: {{ num }}
    </FSpace>
</template>

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

const num = ref();

const precision = 2;
</script>

设置步长 ​

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

play
<template>
    <FSpace>
        <FInputNumber
            :step="step"
            :max="12"
            :precision="precision"
        />
    </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
showStepAction显示步进按钮booleantrue
disabled是否禁用booleanfalse
placeholder输入框默认提示string-
precision数值精度number-
autofocus是否自动获取焦点booleanfalse

Slots ​

属性说明
prefix前缀
suffix后缀

Events ​

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