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: 0,
    props: {
        min: 0,
        step: 0.01,
        precision: 2,
        placeholder: "请输入价格",
    }
}

按钮模式

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

禁用状态

const rule = {
    type: "InputNumber",
    field: "total",
    title: "总价",
    value: 0,
    props: {
        disabled: true,
    }
}

Events 事件示例

监听数值变化

const rule = {
    type: "InputNumber",
    field: "quantity",
    title: "购买数量",
    value: 1,
    props: {
        min: 1,
        max: 100,
    },
    on: {
        change: (value) => {
            console.log('数值改变:', value);
        },
        blur: () => {
            console.log('失去焦点');
        },
        focus: () => {
            console.log('获得焦点');
        },
    },
}

联动计算总价

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

完整配置项:arco-design_InputNumber

value :Number

Props

参数名	描述	类型	默认值
mode	模式（embed：按钮内嵌模式，button：左右按钮模式）	'embed' | 'button'	'embed'
precision	数字精度	number	-
step	数字变化步长	number	1
disabled	是否禁用	boolean	false
error	是否为错误状态	boolean	false
max	最大值	number	Infinity
min	最小值	number	-Infinity
formatter	定义输入框展示值	func	-
parser	从 formatter 转换为数字，和 formatter 搭配使用	func	-
placeholder	输入框提示文字	string	-
hide-button	是否隐藏按钮（仅在embed模式可用）	boolean	false
size	输入框大小	'mini' | 'small' | 'medium' | 'large'	'medium'

Events

事件名	描述	参数
change	值发生改变时触发	value: union
focus	输入框获取焦点时触发	-
blur	输入框失去焦点时触发	-