InputNumber 数字输入框

规则

基础示例

const rule = {
    type: "InputNumber",
    field: "price",
    title: "价格",
    value: 1,
    props: {
        precision: 2
    },
}

Props 配置示例

设置数值范围

const rule = {
    type: "InputNumber",
    field: "quantity",
    title: "购买数量",
    value: 1,
    props: {
        min: 1,
        max: 100,
        step: 1,
    },
}

精度控制

const rule = {
    type: "InputNumber",
    field: "price",
    title: "商品价格",
    value: 99.99,
    props: {
        precision: 2,
        step: 0.01,
        placeholder: "请输入价格",
    },
}

前后缀标签

const rule = {
    type: "InputNumber",
    field: "price",
    title: "价格",
    value: 0,
    props: {
        addonBefore: "¥",
        addonAfter: "元",
        min: 0,
        precision: 2,
    },
}

禁用控制按钮

const rule = {
    type: "InputNumber",
    field: "score",
    title: "评分",
    value: 0,
    props: {
        controls: false,
        min: 0,
        max: 100,
        placeholder: "请输入0-100的分数",
    },
}

Events 事件示例

监听数值变化

const rule = {
    type: "InputNumber",
    field: "price",
    title: "商品价格",
    value: 0,
    props: {
        min: 0,
        precision: 2,
        placeholder: "请输入价格",
    },
    on: {
        change: (value) => {
            console.log('数值改变:', value);
        },
        pressEnter: (e) => {
            console.log('按下回车:', e);
        },
        step: (value, info) => {
            console.log('点击箭头:', value, info);
        },
    },
}

数值变化后计算总价

const rule = [
    {
        type: "InputNumber",
        field: "price",
        title: "单价",
        value: 0,
        props: {
            min: 0,
            precision: 2,
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // 自动计算总价
                const quantity = $inject.api.getValue('quantity') || 1;
                const total = value * quantity;
                $inject.api.setValue('total', total.toFixed(2));
            },
        },
    },
    {
        type: "InputNumber",
        field: "quantity",
        title: "数量",
        value: 1,
        props: {
            min: 1,
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // 自动计算总价
                const price = $inject.api.getValue('price') || 0;
                const total = price * value;
                $inject.api.setValue('total', total.toFixed(2));
            },
        },
    },
    {
        type: "InputNumber",
        field: "total",
        title: "总价",
        props: {
            disabled: true,
            precision: 2,
        },
    },
]

完整配置项:Ant-design-vue_InputNumber

value :Number

Props

成员	说明	类型	默认值
addonAfter	带标签的 input，设置后置标签	slot	-
addonBefore	带标签的 input，设置前置标签	slot	-
autofocus	自动获取焦点	boolean	false
bordered	是否有边框	boolean	true
controls	是否显示增减按钮	boolean	true
decimalSeparator	小数点	string	-
disabled	禁用	boolean	false
formatter	指定输入框展示值的格式	function(value: number | string, info: { userTyping: boolean, input: string }): string	-
keyboard	是否启用键盘快捷行为	boolean	true
max	最大值	number	Infinity
min	最小值	number	-Infinity
parser	指定从 formatter 里转换回数字的方式，和 formatter 搭配使用	function( string): number	-
precision	数值精度	number	-
prefix	带有前缀图标的 input	slot	-
size	输入框大小	string	-
status	设置校验状态	'error' | 'warning'	-
step	每次改变步数，可以为小数	number|string	1
stringMode	字符值模式，开启后支持高精度小数。同时 change 事件将返回 string 类型	boolean	false
upIcon	自定义上箭头图标	slot	<UpOutlined />
downIcon	自定义下箭头图标	slot	<DownOutlined />

Events

事件名称	说明	回调参数
change	变化回调	Function(value: number | string)
pressEnter	按下回车的回调	function(e)
step	点击上下箭头的回调	(value: number, info: { offset: number, type: 'up' | 'down' }) => void