InputNumber 数字输入框

使用鼠标或键盘输入一定范围的标准数值。

基础用法

可以通过输入、鼠标点击或键盘的上下键来改变数值大小。

小数

通过设置属性控制每次改变的精度。

<template>
    <InputNumber :max="10" :min="1" :step="1.2" v-model="value2"></InputNumber>
</template>
<script>
    export default {
        data () {
            return {
                value2: 1
            }
    }
</script>

格式化展示

通过 formatter 格式化数字，以展示具有具体含义的数据，往往需要配合 parser 一起使用。

尺寸

通过设置size属性为large和将输入框设置为大和小尺寸，不设置为默认（中）尺寸。

<template>
    <InputNumber v-model="value3" size="small"></InputNumber>
    <InputNumber v-model="value4"></InputNumber>
    <InputNumber v-model="value5" size="large"></InputNumber>
</template>
<script>
    export default {
        data () {
            return {
                value3: 2,
                value4: 2,
                value5: 2
        }
    }
</script>

不可用

通过设置属性禁用输入框，点击按钮切换状态。

只读

通过设置readonly属性开启只读。

<template>
    <InputNumber v-model="value7" readonly></InputNumber>
</template>
<script>
    export default {
        data () {
            return {
                value7: 1
            }
        }
    }

不可编辑

通过设置editable属性控制是否能编辑。

InputNumber events